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内 容 提要 





使 用 React 能 让 前 端 开发 人 员 月 


上 更 少 、 更 安全 的 代码 来 构建 更 可 靠 、 





更 强大 的 应 用 程序 。 本 书 分 为 两 





部 分 ， 全 面 介绍 了 React 的 相关 主题 。 第 一 部 分 通过 例子 循序 渐进 地 讲解 基础 知识 ， 包 括 创建 一 个 投票 应 





用 程序 、 编 写 组 件 、 处 理 月 
工作 原理 ， 编 写 自 动 化 
序 产品 中 使 用 的 更 高 级 的 概念 
及 如 何 使 用 React Native 编写 原生 、 
国 所 学 。 

本 书 适合 前 端 开发 人 员 阅 读 。 















































元 测试 ， 以 及 使 用 客户 端 路 











跨 平台 的 移动 应 月 





日 户 交互 、 管 理 富 表 单 ， 以 及 与 服务 器 交互 ， 此 外 还 探索 了 Create React App 的 
日 构建 多 页 面 应 用 程序 。 
数据 的 架构 、 传 输 和 管理 的 策略 ， 讲 解 了 Redux、GraphQL、Relay， 以 
程序 。 书 中 每 一 章 都 配 有 示例 代码 ， 有 助 于 读者 贡 


so — 


第 二 部 分 探讨 在 大 型 应 用 程 
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Web 开发 通常 被 视 为 一 个 狗 狂 的 世界 ， 在 这 个 世界 中 ,开发 软件 时 需要 考虑 使 用 不 同 的 代码 解决 
浏览 器 兼容 性 问题 。 我 相信 React 改变 了 这 种 局 面 ， 它 的 设计 原则 是 帮 你 打下 坚实 的 基础 。 


数据 模型 与 DOM 同步 的 过 程 是 前 端 应 用 程序 bug 
的 一 个 主要 来 源 。 这 是 因为 很 难保 证 每 当 数据 发 生变 化 
时 ， 用 户 界面 (ULI) 中 的 所 有 内 容 都 会 随 之 更 新 。 


React 最 重要 的 创新 之 一 是 引入 了 用 纯 JavaScript 表 
示 的 DOM, 并 在 用 户 空间 实现 了 差异 对 比 , 然后 使 用 事 
件 发 送 简单 的 命令 ， 如 create (创建 )、update (更 新 ) 
和 delete (删除 。 


使 用 React, 任何 变化 都 会 重新 泻 染 所 有 内 容 。 你 不 
仅 拥有 了 默认 安全 的 代码 ， 而 且 工 作 量 更 少 ， 因 为 你 只 
需 编 写 创 建 路 径 ， 不 用 关心 更 新 。 


长 期 以 来 , DOM 的 API 数 量 非常 庞大 , 没什么 浏览 
器 能 支持 全 部 实现 , 这 就 导致 浏览 器 的 兼容 性 各 有 差异 。 
React 不 仅 提供 了 一 种 解决 浏览 器 差异 的 好 方法 , 而 且 还 
支持 前 端 库 以 前 不 可 能 实现 的 场景 , 比如 服务 器 端 泻 染 ， 
以 及 在 原生 i0S、Android 甚至 硬件 组 件 上 演 染 的 能 


关于 React 最 重要 的 一 点 ， 也 是 你 应 该 阅读 本 书 的 主要 原因 是 ， 它 不 仅 可 以 帮助 你 为 用 户 创建 优 
秀 的 应 用 程序 ,还 可 以 让 你 成 为 一 名 更 优秀 的 开发 人 员 。 前 端 库 总 是 兴起 一 段 时 间 然 后 逐渐 淡出 人 们 
的 视野 ，React 也 不 例外 。React 和 其 他 库 的 不 同 之 处 在 于 ， 它 可 以 教会 你 一 些 概念 ， 这 些 概念 可 以 在 
你 的 整个 职业 生涯 中 反复 使 用 。 

因为 React 没有 附带 模板 系统 ， 而 是 迫使 你 使 用 JavaScript 的 全 部 功能 来 构建 UI， 所 以 你 的 


JavaScript 技能 会 变 得 更 好 。 


你 将 使 用 map() 函数 和 filter() 函 数 来 体验 函数 式 编程 (fonctional programming ) 的 部 分 功能 ， 
我 们 鼓励 你 使 用 JavaScript 的 最 新 特性 (包括 ES6 )。 由 于 没有 抽象 出 数据 管理 ，React 会 迫使 你 考虑 
如 何 构 建 应 用 程序 ， 并 鼓励 你 考虑 “不 可 变性 ”之 类 的 概念 。 
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2 
我 非常 自豪 的 是 ， 围 绕 React 构建 的 社区 勇于 “重新 思考 最 佳 实践 "。 社 区 在 许多 领域 挑战 现状 。 
著作 来 学 习 和 理解 React 的 基本 原理 。 学 习 新 概念 可 能 会 感到 不 适 ， 你 需要 


我 推荐 你 阅读 这 本 优秀 

花 5 分 钟 练习 ， 直 到 适应 为 止 。 
要 试 着 打破 规则 。 构 建 软 伯 
你 不 想 按照 React 方 式 做 事 时 ， 它 也 为 你 提供 了 
想 一 些 疯 狂 的 点 子 吧 ， 也 许 有 一 天 你 会 发 明 出 下 一 个 React 呢 ! 


当 


























F 没 有 最 好 的 方法 ，React 也 不 例外 。 实 际 上 React 接 受 了 这 一 事实 ， 
些 方 法 。 


























Christopher Chedeau ( (@vjeux ) 


Facebook 前 端 工程 师 ，React Native 共同 创作 者 


如 何 充分 利用 本 书 


概述 

本 书 旨 在 成 为 学 习 React 最 有 用 的 资源 。 读 完 本 书后 ， 你 和 你 的 团队 将 拥有 构建 可 靠 且 功能 强大 
的 React 应 用 程序 所 需 的 一 切 知识 。 

React 核心 库 简 洁 而 强大 。 学 完 前 几 章 后 ， 你 将 对 React 的 基本 原理 有 扎实 的 理解 ,并 能 够 使 用 该 
框架 构建 一 系列 丰富 的 交互 式 Web 应 用 程序 。 

除了 核心 库 之 外 ，React 生态 系统 中 还 有 许多 工具 ， 可 以 帮助 构建 应 用 程序 产品 ， 比 如 客户 端的 
页 面 间 路 由 、 复 杂 状 态 管理 和 大 规模 的 API 交互 等 。 

本 书 由 两 部 分 组 成 。 

第 一 部 分 通过 例子 循序 渐进 地 讲解 所 有 的 基础 知识 。 你 将 创建 第 一 个 应 用 程序 ， 学 习 如 何 编写 组 
件 ， 开 始 处 理 用 户 交 互 ， 管 理 富 表单 ， 甚 至 与 服务 器 交互 。 


我 们 将 探索 Create React App ( 它 是 Facebook 运行 React 应 用 程序 的 工具 ) 的 工作 原理 , 编写 自 
动 化 单元 测试 ， 使 用 客户 端 路 由 构建 多 页 面 应 用 程序 。 


第 二 部 分 介绍 在 大 型 应 用 程序 产品 中 使 用 的 更 高 级 的 概念 。 这 些 概念 将 探讨 数据 的 架构 、 传 输 和 
管理 的 策略 。 


Redux 是 基于 Facebook Flux 架构 的 状态 管理 范式 。 它 为 大 型 状态 树 提供 了 一 个 结构 ， 并 允许 将 
应 用 程序 中 的 用 户 交 互 与 状态 更 改 解 耦 。 


GraphQL 是 一 种 功能 强大 、 基 于 类 型 的 REST API 替代 方案 ,其 中 客户 端 描 述 了 所 需 的 数据 。 我 
们 还 会 介绍 如 何 为 你 自己 的 数据 编写 GraphQL 服务 器 。 


Relay 是 GraphQL 和 React 之 间 的 黏合 剂 。 它 是 一 个 获取 数据 的 库 ， 有 助 于 编写 灵活 、 高 性 能 的 
应 用 程序 ， 且 无 须 编 写 大 量 获取 数据 的 代码 。 


最 后 一 章 将 讨论 如 何 使 用 React Native 编写 原生 、 跨 平台 的 移动 应 用 程序 。 
为 了 充分 利用 本 书 ， 我 们 想 给 你 一 些 指引 。 


首先 ， 你 不 需要 从 头 到 尾 按 顺 序 阅 读本 书 ， 不 过 我 们 认为 本 书 内 容 的 编排 顺序 非常 适合 你 学 习 。 
建议 你 在 深入 学 习 第 二 部 分 的 概念 之 前 ， 先 学 习 第 一 部 分 中 的 所 有 概念 。 


其 次 ， 请 记 住 它 不 只 是 一 本 书 ， 它 还 是 一 门 课程 ， 每 一 章 都 有 示例 人 代码。 下面 ， 我 们 将 告诉 你 : 
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2 如 何 充 分 利用 本 书 





e 如 何 运 行 示例 代码 ; 
e 如 何在 出 现 问题 时 获得 帮助 。 





\ 一 /一 


运行 示例 代码 


本 书 附带 了 可 运行 的 示例 代码 库 "。 如 果 你 的 书 是 在 亚马逊 网 站 上 购买 的 ， 你 应 该 会 收 到 一 封 附 
带 说 明 的 电子 邮件 。 
如 果 你 在 查找 或 下 载 示例 代码 时 遇 到 任何 问题 ， 请 发 送 电子 邮件 至 react@fullstack,io。 
我 们 使 用 npm 运行 本 书 的 示例 。 你 可 以 使 有 


npm install 
npm start 











~ 




















] 以 下 两 个 命令 启动 大 多 数 应 用 程序 : 














用 如 果 你 不 康 悉 npm， 可 以 在 1.2 节 学 习 如 何 安装 ， 





运行 npm start 后 ， 你 会 在 屏幕 上 看 到 一 些 得 出， 这 些 输出 告诉 你 要 打开 哪些 URL 来 查看 应 用 


























有 些 应 用 程序 需要 额外 的 命令 来 设置 。 如 果 你 不 清楚 如 何 运 行 特 定 的 示例 应 用 程序 ， 请 查看 该 项 
目 目录 中 的 README .md 文件 。 每 个 示例 项 目 都 包含 一 个 README .md 文件 ， 说 明 如 何 运行 应 用 程序 。 


项 目 设 置 


前 两 个 项 目 从 简单 的 React 设置 开始 ， 从 而 使 我 们 能 快速 地 编写 React 应 用 程序 。 
除了 几 个 项 目 以 外 ， 本 书 的 其 他 项 目 是 使 用 Create React App 构建 的 。 
Create React App 是 基于 Webpack 开发 的 。Webpack 是 一 个 处 理 JavaScript、CSS 、HTML 和 图 像 


文件 的 打包 工具 。 第 7 章 将 深入 探讨 Create React App， 但 Create React App 并 不 是 使 用 React 的 必要 
条 件 ， 它 只 是 包装 了 Webpack ( 以 及 其 他 一 些 工 具 )， 使 其 易于 人 门 。 













































































代码 块 和 上 下 文 


本 书 中 的 每 个 代码 块 都 来 自 示 例 代 码 库 ， 例 如 ， 下 面 是 第 1 章 中 的 一 个 代码 块 : 
voting_app/public/js/app-2.js 


























class ProductList extends React .Component { 
render() { 
return ( 
<div className='ui unstackable items ' > 
<Product /> 





中 本 书 中文 版 读者 可 访问 ituring.cn/book/2673 下 载 代码 。 
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</div> 
) ; 
} 








请 注意 ， 该 代码 块 的 头 部 表示 包含 该 代码 的 文件 路 径 : voting_app/public/js/app-2.js。 

如 果 你 觉得 示例 代码 缺少 上 下 文 ， 请 使 用 你 喜欢 的 文本 编辑 器 打开 完整 的 代码 文件 。 我 们 也 希望 
你 能 在 阅读 示例 代码 的 同时 动手 敲 裔 代码 。 

例如 ， 我 们 通常 需要 导入 库 来 运行 代码 。 在 本 书 前 几 章 中 ， 我 们 包含 了 这 些 import 语句 ,目的 
是 让 你 清楚 地 知道 库 来 自 哪 里 ; 后 面 的 章节 则 是 进 阶 篇 ， 更 侧重 于 关键 概念 ， 而 不 是 重复 前 面 介 绍 的 
样板 代码 。 如 果 你 不 清楚 上 下 文 ， 请 打开 下 载 的 示例 代码 。 


代码 块 编号 


本 书 有 时 会 分 步 又 创建 一 个 更 大 的 示例 。 如 果 你 看 到 载 入 的 文件 具有 数字 后 绥 ,， 通 常 意 味 着 正在 
构建 更 大 的 文件 。 

例如 , 在 上 面 的 代码 块 中 有 一 个 文件 名 为 app-2.js。 当 你 看 到 -W. js 时 ,这 个 文件 名 后 绥 表 示 正 
在 构建 该 文件 的 最 终 版 本 。 你 可 以 跳 转 到 该 文件 ， 并 查看 特定 阶段 所 有 代码 的 状态 。 
获取 帮助 

虽然 我 们 已 尽力 做 到 清晰 明了 并 准确 地 盖 述 ， 但 你 还 是 有 可 能 在 

通常 可 以 把 问题 归 为 三 类 : 

e 书 中 出 错 了 (例如 ， 本 书 错误 地 描述 了 一 些 内 容 ); 

e 本 书 的 代码 出 错 了 ; 

e 你 的 代码 出 错 了 。 

如 果 你 发 现 我 们 有 些 描述 不 准确 ,或 者 觉得 有 些 概念 不 清楚 ,请 给 我 们 发 电子 邮件 ! 我 们 希望 而 
保 这 本 书 的 内 容 既 准确 又 清晰 。 

如 果 你 怀疑 示例 代码 有 问题 ,请 确保 你 下 载 的 代码 包 版 本 是 最 新 的 ， 因 为 我 们 会 定期 地 发 布 代码 
更 新 。 

如 果 你 正在 使 用 的 代码 是 最 新 的 ， 并 且 你 觉得 在 代码 中 发 现 了 一 个 bug， 那 么 请 告知 我 们 。 

如 果 你 在 运行 自己 的 应 用 程序 (不 是 我 们 的 示例 代码 ) 时 遇 到 困难 ， 那 我 们 处 理 这 种 情况 会 更 加 
困难 一 些 。 

当 你 想 获取 自 定义 应 用 程序 的 帮助 时 ， 第 一 选择 应 该 是 我 们 的 非 官方 社区 GITTER 的 fullstackreact/ 
fullstackreact 聊天 室 。 我 们 这 些 作者 有 时 会 在 线 ， 但 那里 还 有 数 百 位 其 他 读者 ， 他 们 也 许 能 够 更 快 地 
帮助 你 。 
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i 写 代码 时 遇 到 问题 。 




























































































































































































4 如 何 充 分 利用 本 书 





























如 果 你 的 问题 仍然 没有 解决 ， 我 们 依旧 希望 能 收 到 你 的 来 信 ， 下面 有 一 些 技巧 能 帮助 你 及 时 收 到 
清晰 的 回复 。 


给 我 们 发 电子 邮件 


如 果 你 给 我 们 发 电子 邮件 寻求 技术 支持 ， 以 下 内 容 是 我 们 想 知道 的 。 
你 使 用 的 是 本 书 的 哪个 版 本 ? 
尔 使 用 的 操作 系统 是 什么 ? (例如 Mac OS X 10.8、Windows 95 ) 
相关 的 章节 和 示例 项 日 是 什么 ? 
尔 想 达 到 什么 目的 ? 
尔 做 了 哪些 尝试 ? 
尔 期 望 得 到 什么 输出 结果 
目前 实际 情况 是 怎样 的 ? (包括 相关 的 日 志 输 出 ) 

获得 技术 支持 的 最 佳 方法 是 向 我 们 发 送 一 个 简短 的 、 独 立 的 问题 示例 。 我 们 希望 你 将 问题 示例 上 
传 到 Plunkr， 并 将 链接 发 送 给 我 们 。 

如 果 可 以 将 代码 复制 并 粘贴 到 该 项 目 中 ， 重 现 错误 并 发 送 给 我 们 ， 则 你 及 时 收 到 有 用 回复 的 可 能 
性 会 大 大 增加 。 

当 你 做 好 这 些 准备 后 ， 请 发 送 电子 邮件 至 react@fullstack.io。 期 待 你 的 来 信 ! 


技术 支持 时 间 


我 们 每 周 有 一 次 免费 的 技术 支持 。 
如 果 需 要 我 们 更 快 地 回复 你 并 回答 你 的 团队 的 所 有 问题 ,那么 可 以 考虑 高 级 支持 选项 。 请 发 邮件 
至 react@fullstack.io。 
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本 书 修订 及 更 新 


本 书 修订 编号 39， 支 持 React 16.7.0 ( 2019-01-10 )。 如 果 你 希望 在 Twitter 上 收 到 有 关 本 书 更 新 的 
通知 ， 请 关注 @fullstackio。 









































社区 交流 


我 们 使 用 GITTER 作为 非 官方 的 社区 交流 平台 。 如 果 你 想 和 其 他 人 一 起 交流 ， 请 加 入 我 们 的 
GIITTER。 
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兴奋 起 来 


使 用 React 编写 Web 应 月 
( 比 你 花 几 个 小 时 分 析 过 时 的 博客 文章 要 快 得 多 )。 

如 果 你 以 前 编写 过 客户 端 JavaScript, 就 会 发 现 React 非常 直观 。 如果 这 是 你 第 一 次 真正 涉足 前 端 ， 
那么 你 会 感到 震惊 ， 因 为 你 居然 可 以 如 此 快 地 创建 一 些 值得 分 享 的 东西 。 
所 以 ， 抓紧 学 习 。 你 即将 成 为 React 专家 ， 并 会 在 这 个 过 程 中 获得 很 多 乐趣 。 让 我 们 一 起 深入 研 











程序 很 有 趣 。 通 过 本 书 , 你 将 学 习 如 何 快速 构建 真正 的 React 应 用 程序 




























































































究 React 吧 ! 
一 一 纳 特 和 安东尼 


电子 书 
扫描 如 下 二 维 码 ， 即 可 购买 本 书 中 文 版 电子 书 。 
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1.1 构建 Product Hunt 项目 


本 章 通 过 构建 一 个 简单 的 投票 应 用 程序 ( 受 Product Hunt 网 站 启发 ) 来 快速 学 习 React。 你 将 熟悉 
React 如 何 处 理 前 端 开 发 ， 以 及 从 头 到 尾 构建 交互 式 React 应 用 程序 所 需 的 所 有 基础 知识 。 由 于 React 
核心 库 比较 简单 ， 学 完 本 章 ， 你 就 能 编写 各 种 快速 、 动 态 的 接口 了 。 

我 们 专注 于 让 React 应 用 程序 快速 运行 起 来 ， 并 会 深入 研究 本 书 涉及 的 概念 。 










































































1.2 设置 开发 环境 


1.2.1 代码 编辑 器 
学 习 本 书 需 要 编写 代码 ， 所 以 你 需要 一 个 称 手 的 代码 编辑 器 。 如 果 还 没有 喜欢 的 编辑 器 ， 建 议 你 
使 用 Atom 或 Sublime Text。 























1.2.2 Node.js 和 npm 
本 书 的 所 有 项 目 需 要 运行 在 包含 npm 的 Node.js 开发 环境 中 。 
安装 Nodejs 有 多 种 方式 ， 可 以 访问 Node.js 网 站 获取 详细 信息 。 








UD 





如 果 你 使 用 的 是 Mac, 最 好 直接 从 Node.js 网 站 安装 它 , 而 不 是 通过 其 他 软件 包 管 理 
器 (如 Homebrew )。 通 过 Homebrew 安装 Node.js 会 导致 一 些 问题 。 
Node Package Manager ( 简称 npm ) 是 Nodejs 的 一 部 分 ， 随 Node.js 一 起 安装 。 要 检查 npm 作为 
开发 环境 的 一 部 分 是 否 可 用 ， 可 以 打开 一 个 终端 窗口 并 输入 : 
$ npm -v 


如 果 未 打印 出 版 本 号 并 且 有 错误 ， 请 下 载 一 个 包含 npm 的 Nodejs 安装 程序 。 















































1.2.3 安装 Git 
本 章 的 应 用 程序 需要 用 Git 安装 一 些 第 三 方 库 。 
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如 果 你 没有 安装 Git， 请 到 Git 网 站 参阅 与 你 的 计算 机 操作 系统 对 应 的 安装 说 明 。 
安装 Git 后 ， 建 议 你 重启 计算 机 。 
1.2.4 浏览 器 


最 后 , 强烈 建议 你 使 用 Google Chrome 浏览 器 来 开发 React 应 用 程序 。 本 书 将 使 用 Chrome 开发 工 
具 包 。 为 了 配合 开发 和 调试 ， 建 议 你 现在 就 去 下 载 Chrome。 





贤 












































1.3 ”针对 Windows 用 户 的 特殊 说 明 
本 书 所 有 代码 都 已 在 Windows 10 上 使 用 PowerShell 进行 了 测试 。 


确保 已 安装 了 IIS 


如 果 你 使 用 的 是 Windows 计算 机 并 且 尚 未 在 该 机 器 上 进行 过 Web 开发 ， 那 么 安装 Internet 
Information Services (IIS ) 后 才能 在 本 地 运行 Web 服务 兢 。 


请 参阅 How-To Geek 网 站 的 教程 “How to Install IIS on Windows 8 or Windows 10” 来 安装 IIS。 















































1.4 JavaScript ES6/ES7 





JavaScript 是 Web 的 编程 语言 。 它 可 以 在 很 多 浏览 器 上 运行 ， 如 Google Chrome 、Firefox 、Safari、 
Microsoft Edge 和 Internet Explorer。 不 同 浏览 器 具有 不 同 的 执行 JavaScript 代码 的 解释 器 。 

JavaScript 作为 互联 网 的 客户 端 脚本 语言 被 广泛 采用 ， 从 而 形成 了 标准 组 织 来 管理 它 的 规范 。 规 
范 的 名 称 就 是 ECMAScript 或 ES。 

该 规范 的 第 5 版 称 为 ES5。 可 以 将 ES5 看 作 JavaScript 编程 语言 的 “版 本 ”。ES5 于 2009 年 完成 ， 
在 几 年 内 就 为 所 有 主流 浏览 器 所 采用 。 

JavaScript 的 第 6 版 称 为 ES6, 于 2015 年 完成 。 各 主流 浏览 器 的 最 新 版 本 直到 2017 年 仍 在 添加 对 
ES6 的 支持 。ES6 是 一 次 重大 的 更 新 ,包含 了 一 系列 JavaScript 新 特性 。 用 ES6 编写 的 JavaScript 与 用 
ES5 编写 的 JavaScript 截然 不 同 。 

ES7 基于 ES6 构建 ， 更 新 较 少 ， 于 2016 年 6 月 获得 批准 。ES7 仪 包含 两 个 新 特性 。 

ES6/ES7 是 JavaScript 的 未 来 ,我 们 希望 现在 就 使 用 它们 编写 代码 , 但 也 希望 JavaScript 能 够 在 较 
旧 的 浏览 器 上 运行 ， 直到 旧 的 浏览 器 逐渐 消失 。 在 本 章 后 面 我 们 就 能 体会 到 如 何在 支持 世界 上 绝 大 多 
数 浏 览 絮 的 同时 享受 ES6/ES7 所 带 来 的 好 处 。 

本 书 是 用 JavaScript ES7 编写 的 。 因 其 大 部 分 新 特性 是 在 ES6 中 被 批准 的 ， 所 以 书 中 的 新 特性 被 
称 为 ES6 特性 。 

附录 也 包含 了 ES6 语法 , 我 们 可 以 在 第 一 次 遇 到 ES6 语法 时 参考 该 附录 。 如 果 你 碰 到 不 熟悉 的 语 
法 ， 也 可 以 查阅 附录 B 看 它 是 不 是 新 的 ES6 JavaScript 语法。 
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© ES6 有 时 称 为 ES2015,2015 即 它 最 终 完成 的 年 份 。 相 应 地 ,ES7 通常 被 称 为 ES2016。 


1.5 开始 


1.5.1 示例 代码 
每 章 中 的 所 有 示例 代码 都 可 以 在 本 书 的 代码 包 中 找到 。 该 代码 包 包 含 每 个 应 用 程序 的 完整 版 本 以 


















































司 
及 构建 这 些 应 用 程序 的 样板 文件 。 每 一 章 都 提供 了 详细 的 指导 ， 教 你 如 何 独立 完成 任务 。 

虽然 没有 必要 跟着 本 书 编写 代码 , 但 我 们 强烈 建议 你 这 样 做 。 动 手 敲 代码 有 助 于 巩固 和 加 深 对 概 
念 的 理解 。 


1.5.2 ”应 用 程序 预览 

接 下 来 ,我 们 将 构建 一 个 基本 的 React 应 用 程序 。 在 深入 学 习 之 前 ,我 们 先 从 宏观 上 了 解 一 下 React 
最 重要 的 概念 。 下 面 来 看 看 该 应 用 程序 的 工作 实现 。 

打开 本 书 的 示例 代码 文件 夹 ， 使 用 终端 切换 到 voting_app 目录 : 


$ cd voting_app/ 














如 果 你 不 熟悉 cd 指令 ,需要 知道 它 表示 “change directory”( 更 改 目 录 )。 如 果 你 使 
@ 用 的 是 Mac， 请 执行 以 下 操作 以 打开 终端 并 切换 到 正确 的 目录 : 

(1) 打开 /Applications/Utilities/Terminal.app; 

(2) 输入 cd， 先 不 要 按 回 车 键 ; 

(3) 按 空格 键 ; 

(4) 在 Finder 中 ,将 voting_app 文件 夹 拖 到 终端 窗口 ; 

(5) 按 回 车 键 。 

此 时 终端 已 经 在 正确 的 目录 下 了 。 


二 本 书 以 $ 开 头 的 代码 块 表示 要 在 终端 中 运行 的 命令 。 








首先 需要 使 用 npm 来 安装 所 有 依赖 项 : 
$ npm install 
安装 完 依赖 项 后 ， 就 可 以 使 用 npm start 命令 
$ npm start 


启动 过 程 中 控制 台 会 打印 一 些 日 志 ， 见 图 1-1。 
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im 
$ npm start 


> voting_app@1.1.0 start ~/fullstack-react-code/voting_app 
ckage/fullstack-react-code/voting_app 
> npm run server 


> voting_app@1.1.0 server ~/fullstack-react-code/voting_app 
ackage/fullstack-react-code/voting_app 

> live-server —host=localhost —port=3000 —middleware=. /disable-brow 
ser-cache.js 





图 1-1 启动 日 志 


此 外 ， 浏 览 器 可 能 会 自动 启动 并 打开 该 应 用 程序 。 如 果 没 有 自动 打开 ， 你 可 以 在 浏览 器 中 输入 
http://1localhost:3880 来 查看 正在 运行 的 应 用 程序 ， 见 图 1-2。 





























四 四 四 /图 pProectone x React 


GC © localhost:3000 i 


Popular Products 


人 55 


Haught or Naught 
High-minded or absent-minded? You decide. 


全 44 


Yellow Pail 
On-demand sand castle construction expertise. 





全 42 


Tinfoild: Tailored tinfoil hats 
We already have your measurements and shipping address. 


9 


和 2 23 


Supermajority: The Fantasy Congress League 
Earn points when your favorite politicians pass legislation. 

















图 1-2 应 用 程序 的 完整 版 本 


这 个 示例 应 用 程序 类 似 于 Product Hunt 和 Reddit 网 站 。 这 些 网 站 提供 了 用 户 投票 的 链接 列表 。 和 
这 些 网 站 一 样 ， 该 示例 应 用 程序 也 可 以 对 产品 进行 投票 ， 所 有 产品 都 根据 票数 进行 实时 排序 。 
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© 停止 运行 Node 服务 器 的 快捷 键 是 Ctrl+C。 


1.5.3 ”应 用 程序 准备 


在 终端 中 运行 1s 查看 项 目 布局 : 


$ 1s 

README .md 
disable-browser-cache.js 
nightwatch. json 
node_modules/ 

package. json 

public/ 

tests/ 





多 如 果 在 macOS 或 Linux 上 运行 ， 可 以 像 上 面 做 的 那样 使 用 1s -1p 来 格式 化 输出 。 


Node 应 用 程序 包含 一 个 package. json 文件 , 用 来 指定 项 目的 依赖 项 。 运 行 npm install 时 , npm 
会 使 用 package . json 来 确定 需要 下 载 和 安装 的 依赖 项 ， 并 将 其 安装 到 node_modules 文件 夹 中 。 


@ 后 面 的 章节 会 探讨 package .json 的 格式 。 




















我 们 即将 使 用 的 代码 位 于 public 文件 夹 中 。 查 看 该 文件 来， 如 下 所 示 : 


$ ls public 
favicon.ico 
images/ 
index.html 
js/ 
semantic/ 
style.css 
vendor/ 


这 是 常见 的 Web 应 用 程序 的 布局 public 文件 夹 中 的 index.html 是 我 们 提供 给 请 求 网 站 的 浏览 
器 的 文件 。 很 快 我 们 就 会 知道 ，index .htm1l 是 应 用 程序 的 核心 部 分 ， 它 负责 加 载 应 用 程序 中 的 其 他 
资源 。 

接 下 来 查看 public/js 目录 : 


$ ls public/js 
app-1 .js 
app-2.js 
app-3.js 
app-4.js 
app-5.js 
app-6.js 
app-7.js 
app-8.js 
app-9.js 
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app-complete. js 
app.js 
seed.js 














public/js 是 应 用 程序 中 存放 JavaScript 的 位 置 。app.js 是 编写 React 应 用 程序 的 地 方 。 

















app-complete.js 是 正在 开发 的 应 用 程序 的 完整 版 本 ， 我 们 刚刚 已 经 看 过 。 

此 外 ， 本 章 中 构建 的 app. js 的 每 个 版 本 (app-1.js、app-2.js 等 ) 都 已 
每 个 代码 块 中 引用 的 不 同 应 用 程序 版 本 都 可 以 在 里 面 找 到 。 你 可 以 将 这 些 应 用 程序 版 本 中 较 长 的 代码 
复制 到 app.js 中 使 用 。 






































er 














包含 在 示例 代码 库 中 。 





Ce 所 有 项 目 都 包含 实用 的 README .md 文件 ， 它 将 说 明 如 何 运行 应 用 程序 。 























在 开始 前 ， 首 先 要 确保 在 index.html 中 不 再 加 载 app-complete.js。 然 后 我 们 就 有 了 一 个 空 





的 画布 并 可 以 在 app. js 中 开始 工作 了 。 








在 文本 编辑 器 中 打开 public/index.html， 内 容 如 下 所 示 : 
voting_app/public/index.html 





<!IDOCTYPE html> 
<html> 


<head> 
<meta charset="utf-8"> 
<title>Project Onex</title> 
<link rel="stylesheet" href="./semantic-dist/semantic.css" /> 
<link rel="stylesheet" href="./style.css" /> 
“<script src="vendor/babel-standalone. js"></script> 
“<script src="vendor/react.js"></script> 
“<script src="vendor/react-dom.js"></script> 
“</head> 


<body> 
<div class="main ui text container"> 
<h1i class="ui dividing centered header">Popular Products</h1> 
<div id="content"></div> 
</div> 
<script src="./js/seed.js">»</script> 
<script src="./js/app.js">»¢/script> 
“1!-- 在 开始 前 删除 下 面 的 script 标签 --》 
<script 
type="text/babel" 
data-plugins="transform-class-properties" 
src="./js/app-complete.js" 
> </script> 
</body> 


</html> 





稍 后 讨论 chead> 标 签 中 加 载 的 所 有 依赖 项 。HTML 文档 的 核心 是 以 下 几 行 代码 : 
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voting_app/public/index.html 





《<div class="main ui text container"> 
<h1i class="ui dividing centered header">Popular Products</h1> 
<div id="content"></div> 

</div> 





@. 这 个 项 目 使 用 Semantic UI 进行 样式 设计 。 


Semantic UI 是 一 个 CSS 框架 ,与 Twitter 公司 的 Bootstrap 很 像 。 它 提供 了 一 个 网 格 
系统 和 一 些 简 单 的 样式 。 你 无 须 了 解 Semantic UI 即 可 使 用 本 书 ， 因 为 我 们 提供 了 你 
需要 的 所 有 样式 代码 ,在 某 些 情况 下 ,你 需要 查看 Semantic UI 文档 来 熟悉 它 的 框架 
并 探索 如 何 将 其 应 用 到 自己 的 项 目 中 。 





这 里 的 class 属性 只 作用 于 样式 ， 可 以 安全 地 忽略 。 删 除 它 们 ， 核 心 代码 就 变 得 简洁 了 : 
<div> 
<h1i>Popular Products</h1> 


<div id="content"></div> 
</div> 











页 面 ee 题 (hi1 ) 和 一 个 id 为 content 的 div。 这 个 div 是 最 终 挂 载 React 应 用 程序 的 地 方 。 
你 很 快 就 会 知道 它 代表 什么 意思 。 


接 下 来 的 几 行 代码 告诉 浏览 器 要 加 载 哪 些 JavaScript。 在 开始 构建 自己 的 应 用 程序 前 ， 需 要 
把 ./app-complete. js 脚本 标签 完全 删除 。 


<script src="./js/seed.js"></script> 
<script src="./js/app.js">¢/script> 
<1-- 在 开始 前 删除 下 面 的 script 标签 --》 
<Seript 
type='"text/babel" 
data-plugins="transform-elass—preoperties" 
Ste=""/js/app-eemplete-js” 
/Seript> 


保存 更 新 后 的 index.html 并 重新 加 载 浏览 器 ， 可 以 看 到 应 用 程序 已 经 消失 。 
1.6 ”什么 是 组 件 


构建 React 应 用 程序 的 基础 就 是 组 件 。 可 以 将 单独 的 React 组 件 视 为 应 用 程序 中 的 一 个 UI 组 件 。 
我 们 的 应 用 程序 的 界面 组 件 可 分 为 两 类 ， 见 图 1-3。 
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Popular Products 


Haughtor Naught 
High-minded or absent-minded? You declde. 


2 44 


Yellow Pail 
On-demand sand castle construction expertise, 


全 42 


Tinfoild: Tailored tinfoil hats 
We already have your measurements and shipping address. 


Supermajority: The Fantasy Congress League 
Earn points when your favorite politicians pass legislation. 


0 
图 1-3 ”应 用 程序 的 组 件 
该 界面 是 由 一 个 父 组 件 和 多 个 子 组件 组 成 的 层次 结构 , 父 组 件 和 子 组 件 分 别称 为 ProductList 组 
件 和 Progduct 组 件 。 


(1) ProductList 组 件 : 包含 Product 组 件 的 列表 。 
(2) Product 组 件 : 显示 给 定 产品 。 


React 组 件 不 仅 可 以 清晰 地 映射 到 对 应 的 UI 组 件 ， 而 且 是 独立 的 。 标 记 代 码 、 视 图 逻辑 以 及 组 件 
的 特定 样式 都 集中 在 一 个 地 方 。 该 特性 使 得 React 组 件 可 重用 。 


此 外 ， 在 本 章 或 本 书 中 可 以 知道 ，React 的 组 件数 据 流 和 交互 性 范式 是 严格 定义 的 。 在 React 中 ， 

当 组 件 的 输入 发 生 更 改 时 ， 框 架 只 是 重新 演 染 该 组 件 。 这 保证 了 UI 的 强 一 致 性 ; 
对 于 给 定 的 输入 集合 ， 输 出 组 件 在 页 面 上 的 显示 ) 总 是 相同 的 。 

1.6.1 第 一 个 组 件 


从 构建 ProductList 组 件 开始 人手。 本章 其 余 的 React 代码 会 在 public/js/app.js 文件 中 编写 。 
打开 app.js 并 插入 组 件 : 


voting_app/public/js/app-1.js 
































class ProductList extends React .Component { 
Trender() { 
return ( 
<div className='ui unstackable items ' > 
Hello, friend! I am a basic React component. 
</div> 
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React 组 件 是 继承 React .Component 类 的 ES6 类 。 代 码 中 引用 了 React 变量 ， 因 为 index.html 
已 提前 加 载 了 React 库 ， 所 以 可 以 在 这 里 引用 它 : 


voting_app/public/index.html 























<script src="vendor/react.js"> </script> 





ProductList 类 中 有 一 个 方法 render( )。render() 是 React 组 件 唯一 必需 的 方法 。React 通过 该 
方法 的 返回 值 来 确定 要 泻 染 到 页 面 的 内 容 。 





























虽然 JavaScript 不 是 一 种 经 典 语言 ， 但 ES6 引入 了 类 声明 语法 。ES6 类 是 JavaScript 
基于 原型 的 继承 模型 的 语法 糖 。 


本 书 介绍 了 为 构建 React 组 件 的 类 需要 了 解 的 重要 细节 。 要 详细 了 解 ES6 类 ， 请 参 
阅 相 关 的 MDN 的 文档 。 





声明 React 组 件 有 两 种 方法 : 

(1) 作为 ES6 类 (如上); 

(2) 导入 并 使 用 createReactClass() 方 法 。 
使 用 ES6 类 的 示例 如 下 所 示 : 


class HelloWorld extends React.Component { 
render() { return(<p>Hello, world!l</p>) } 


} 
使 用 create-response-class 库 中 的 createReactClass 函数 编写 相同 的 组 件 : 


import createReactClass from ' create-react-class ' 


const HelloWorld = createReactClass({ 
render() { return(<p>Hello, world!l</p>) } 


}) 
在 React15 及 更 早 的 版 本 中 ， 这 个 方法 可 通过 react 库 获 得 : 


const HelloWorld = React.createClass({ 
render() { return(<p>Hello, world!l</p>) } 


}) 


在 撰写 本 书 时 ， 两 种 类 型 的 声明 都 已 被 广泛 使 用 。 不 过 社区 推荐 尽 可 能 使 用 ES6 类 组 件 ， 这 也 
正 是 本 书 使 用 的 风格 。 



































如 果 你 对 JavaScript 有 一 定 的 了 解 ， 应 该 会 觉得 下 


voting_app/public/js/app-1.js 


硬 的 返回 值 很 奇怪 : 








return ( 
<div className='ui unstackable items'> 
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Hello, friend! I am a basic React component. 
</div> 
); 
返回 值 的 语法 看 起 来 和 传统 的 JavaScript 有 些 不 像 。 该 语法 称 为 JavaScript 扩展 语法 ( JavaScript 
eXtension syntax，JSX )， 是 由 Facebook 编写 的 JavaScript 语法 的 扩展 。JSX 使 开发 人 员 能 够 以 熟悉 的 
类 HTML 语法 为 组 件 视 图 编写 标记 代码 。JSX 代码 最 后 会 编译 成 vanilla JavaScript ( 原生 JavaScript )。 
虽然 JSX 不 是 必需 的 ， 但 本 书 会 使 用 它 ， 因 为 它 与 React 配合 得 非常 好 。 


即使 你 不 太 熟 悉 JavaScript， 我 们 依然 建议 你 在 React 代码 中 使 用 JSX。 通 过 体验 ， 
你 将 了 解 JSX 和 JavaScript 之 间 的 界线 。 


























1.6.2 JSX 


React 组 件 最 终 泻 染 为 浏览 器 中 显示 的 HTML。 因 此 ,组 件 的 render( ) 方 法 需要 描述 视图 该 怎样 
表示 为 HTML。React 使 用 文档 对 象 模型 (Document Object Model，DOM ) 的 虚拟 表示 来 构建 应 用 程 
序 ， 并 称 之 为 虚拟 DOM。 现 在 暂 不 深入 讨论 细节 ， 但 要 知道 React 允许 我 们 用 JavaScript 描述 组 件 的 
HTML 表示 。 











@ DOM 是 指 浏览 器 的 HTML 树 ， 它 构成 了 一 个 Web 页 面 。 





创建 JSX 的 目的 是 使 表示 HTML 的 JavaScript 看 起 来 更 像 HTML。 要 了 解 HTML 和 JSX 之 间 的 
区 别 ， 请 参考 以 下 JavaScript 语法 : 


React .createElement('dqiv'，{className: 'ui items'}, 
'Hello, friend! I am a basic React component.' 


) 
{在 JSX 中 则 表示 为 


<div className='ui items '》> 
Hello, friend! I am a basic React component . 
</div> 


后 者 的 可 读 性 略 有 提高 。 以 下 符 套 树 结构 会 使 之 恶化 : 


React .createElement('div'，{className: 'ui items'}, 
React .createElement('p'，nul1，'Hello，friend! I am a basic React component.') 


) 
而 用 JSX 则 表示 为 


<div className='ui items'> 
<p> 
Hello, friend! I am a basic React component . 
</p> 
</div> 


JSX 在 JavaScript 版 本 上 提供 了 轻 量 级 抽象 ， 但 带 来 了 更 好 的 代码 可 读 性 。 可 读 性 提高 了 应 用 程 
序 的 寿命 ， 也 会 让 新 的 开发 人 员 更 容易 上 手 。 








MN 
































12 第 1 章 第 一 个 React Web 应 用 程序 





虽然 上 面 的 JSX 代码 看 起 来 与 HTML 几乎 相同 ， 但 要 记 住 JSX 实际 上 是 编译 成 了 
@ JavaScript ( 例如 React .createElement('dqiv') )。 


React 负责 在 运行 时 把 每 个 组 件 泻 染 成 浏览 器 中 实际 的 HTML。 
1.6.3 ”开发 者 控制 台 


现在 你 已 编写 了 第 一 个 组 件 ， 并 知道 它 使 用 了 一 种 名 为 JSX 的 特殊 JavaScript 来 提高 可 读 性 。 
在 编辑 完 并 保存 好 app. js 文件 后 ， 刷 新 浏览 器 看 看 有 什么 变化 ， 见 图 1-4。 














四 
© 
. 
8 
[0 E 
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图 1-4 刷新 浏览 器 之 后 的 页 面 
什么 都 没有 ? 
每 个 主流 浏览 器 都 附带 一 个 工具 包 ， 可 帮助 开发 人 员 处 理 JavaScript 代码 。 工 具 包 的 核心 部 分 是 


控制 台 , 可 以 将 它 视 为 JavaScript 和 开发 人 员 之 间 的 主要 通信 媒介 。 如 果 JavaScript 在 执行 过 程 中 遇 到 
错误 ， 它 就 会 在 控制 台中 提示 。 


@ Web 服务 器 1ive-server 应 在 检测 到 app.js 有 变化 时 自动 刷新 页 面 。 





























@ 要 在 Chrome 中 打开 控制 台 ， 请 在 浏览 器 菜单 栏 中 依次 打开 View>Developer> 


JavaScript Console。 


或 者 使 用 快捷 键 : 在 Mac 上 为 Command+ Option+Ji 在 Windows/Linux 上 为 Control 二 
Shift+L, 


打开 控制 台 ( 见 图 1-5 )， 我 们 得 到 了 一 条 神秘 的 线索 : 


Uncaught SyntaxError: Unexpected token «< 
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1-5 ”控制 台 错误 信息 
这 个 SyntaxError 阻止 了 代码 运行 。 当 JavaScript 引擎 在 解析 代码 时 遇 到 不 符合 语言 语法 的 令 牌 
或 令 牌 顺 序 时 ， 将 抛 出 SyntaxError 。 此 类 型 的 错误 表示 某 些 代码 的 位 置 不 正确 或 拼写 错误 。 


报错 的 原因 是 什么 呢 ? 是 因为 浏览 器 的 JavaScript 解析 器 在 遇 到 JSX 时 会 出 错 。 解 析 咒 对 JSX 
一 无 所 知 。 对 它 而 言 ， 符 号 < 的 位 置 完全 是 错误 的 。 


如 前 所 述 ，JSX 是 标准 JavaScript 的 扩展 。 所 以 可 以 让 浏览 器 的 JavaScript 解 释 器 使 用 此 扩展 。 
1.6.4 Babel 

本 章 开 头 提 到 ,本 书 中 的 所 有 代码 都 将 使 用 ES6 JavaScript。 然而 , 日 前 大 多 数 浏 览 器 并 不 完全 支 
持 ES6。 


Babel 是 一 个 JavaScript 转译 器 。 它 会 将 ES6 代码 转换 为 ES5 代码 , 这 个 过 程 被 称 为 转译 。 因 此 ， 
现在 可 以 享受 ES6 的 特性 ， 同 时 也 能 确保 代码 在 仅 支 持 ES5 的 浏览 絮 中 仍 能 运行 。 


Babel 的 另 一 个 实用 功能 是 它 可 以 理解 JSX。Babel 把 JSX 编译 成 vanilla ES5 JS ， 这 样 就 可 以 被 浏 
览 吉 解 释 和 执行 了 。 只 需要 告诉 浏览 器 我 们 和 希望 使 用 Babel 编译 和 运行 JavaScript 代码 。 


示例 代码 中 的 index.html 已 在 其 head 标签 中 导入 了 Babel: 























<head> 
《!-- ... ——> 
<script src="vendor/babel-standalone.js"></script> 
《!-- ... ——> 

</head> 





而 我 们 需要 做 的 就 是 告诉 JavaScript 运行 时 ,代码 应 该 由 Babel 编译 。 当 我 们 将 index.html 中 的 
脚本 导入 text/babel 时 ， 可 以 通过 设置 type 属性 来 实现 这 一 点 。 


打开 index.html 并 修改 加 载 ./js/app.js 的 脚本 ， 我 们 将 为 它 添加 两 个 属性 : 
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<ScTipt src="./js/seed.js"></script> 

<script 
type="text/babel" 
data-plugins="transform-class-properties" 
src="./js/app.js" 

> </script> 





第 一 个 属性 type="text/babel" 表 示 和 需要 Babel 处 理 此 脚本 的 加 载 。 第 二 个 属性 data-plugins 
定 了 本 书 中 使 用 的 一 个 特殊 的 Babel 插件 。 本 章 末 尾 将 讨论 这 个 插件 。 


保存 index.html 并 刷新 页 面 ， 见 图 1-6。 








四 日 四 /图 pojectone 下 eect 
GC © localhost3000 食 | 于 


Popular Products 











图 1-6 保存 index.html 并 刷新 页 面 后 的 效果 


还 是 什么 都 没有 ， 但 控制 台 不 再 有 错误 。 你 可 能 会 看 到 一 些 警 告 (用 黄色 而 不 是 红色 高 亮 显 示 )， 
这 取决 于 Chrome 版 本 。 可 以 安全 地 忽略 这 些 警 告 。 
Babel 成 功 地 将 JSX 编译 成 JavaScript， 并 且 浏 览 器 也 能 上 毫 无 问题 地 运行 该 JavaScript。 


所 以 问题 到 底 出 在 哪里 ? 虽然 我 们 已 定义 了 组 件 , 但 是 还 没有 告诉 React 去 使 用 它 。 我 们 需要 告 
诉 React 框架， 组 件 应 该 插入 这 个 页 面 。 














站 











SG 你 可 能 会 看 到 两 个 错误 ， 具 体 取 决 于 Chrome 版 本 。 
第 一 个 : 


Fetching scripts with an invalid type/language attributes is deprecated and will be \ 
removed in M56, around January 2017 . 


这 个 警告 具有 误导 性 ， 可 以 放心 地 忽略 。 第 二 


You are using the in-browser Babel transformer. Be sure to precompile your scripts f\ 
or production 


同样 ， 也 可 以 忽略 它 。 为 了 快速 启动 和 运行 项 目 ， 我 们 让 Babel 在 浏览 器 中 实时 转 
译 。 本 书 稍 后 将 探讨 更 适用 于 生产 环境 的 其 他 JavaScript 转译 策略 。 


1.6 什么 是 组 件 15 





1.6.5 ReactDOM.render( ) 方 法 
我 们 需要 告知 React 在 一 个 特定 的 DOM 节点 中 演 染 这 个 ProductList 组 件 。 


在 app.js 内 的 组 件 下 面 添加 以 下 代码 : 
voting_app/public/js/app-1.js 























class ProductList extends React.Component { 
render() { 
return ( 
《<div className='ui unstackable items'> 
Hello, friend! I am a basic React component. 
</div> 
站 
} 
} 


ReactDOM.render( 

<ProductList />», 

document .getElementById('content') 
); 




















ReactDOM 来 自 react-dom 库 ， 我们 在 index.html 中 也 引入 了 这 个 库 。ReactDOM.render( ) 方 法 
需要 两 个 参数 ， 第 一 个 参数 是 需要 演 染 的 组 件 (what )， 第 二 个 参数 是 泻 染 组 件 的 位 置 (where ): 
ReactDOM.render( [what], [where|); 




















对 于 what ,我 们 在 JSX 中 传递 了 React 的 ProductList 组 件 的 引用 。 对 于 where， 你 应 该 还 记得 
在 index.html 中 包含 了 一 个 div 标签 ， 其 id 为 content: 
voting_app/public/index.html 























<div id="content"></div> 





传递 该 DOM 节点 的 引用 作为 ReactDOM.render( ) 方 法 的 第 二 个 参数 。 


在 这 里 值得 注意 的 是 ， 不 同类 型 的 React 元 素 声明 使 用 不 同 的 大 小 写 表 示 。 示 例 中 有 类 似 <qiv， 
这 样 的 HTML DOM 元 素 和 一 个 名 为 cProductList /的 React 组 件 。 在 React 中 ,原生 HTML 元 素 始 
终 以 小 写字 母 开 头 ， 而 React 组 件 名 称 始终 以 大 写字 母 开 头 。 


现在 ReactDOM.render() 方 法 已 添加 到 app. js 的 末尾 ， 接 着 保存 文件 并 刷新 浏览 器 页 面 ， 见 
图 1-7。 
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@O® /ro React 


让 CC [ localhcst:3000 





Popular Products 


Hello, friend! | am a basic React component. 








图 1-7 组 件 已 在 页 面 上 演 染 出 来 


回顾 一 下 ， 我 们 使 用 ES6 类 和 JSX 编写 了 一 个 React 组 件 ， 指 定 Babel 将 示例 代码 转译 为 ES5， 
然后 使 用 ReactDOM.render( ) 方 法 将 组 件 写 和 人 DOM。 











完成 这 些 后 ， 我 们 发 现 当前 的 ProductList 组 件 就 显得 相当 无 趣 了 。 我 们 最 终 想 要 的 结果 是 
ProductList 组 件 能 泻 染 出 产品 列表 。 

每 个 产品 都 是 自己 的 UI 元 素 ， 即 一 个 HTML 片段 。 可 以 把 每 个 元 素 表 示 为 它 自己 的 Product 组 
件 。React 范式 的 核心 是 组 件 可 以 演 染 其 他 组 件 。 我 们 可 以 让 ProductList 组 件 泻 染 Product 组 件 ， 
并 显示 自己 喜欢 的 产品 到 页 面 上 。 每 个 Product 组 件 都 是 ProductList ( 父 组 件 ) 的 子 组 件 。 


























1.7 构建 Product 组 件 


让 我 们 构建 一 个 包含 产品 清单 的 Product 子 组 件 。 就 像 ProductList 组 件 一 样 , 需要 声明 一 个 继 
承 React .Component 的 新 ES6 类， 并 定义 一 个 render( ) 方 法 : 


class Product extends React.Component { 
render() { 
return ( 
<div> 
{ /x* ... todo ... */ } 
</div> 
); 
} 
} 
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ReactDOM.render( 


2 


YY Ss 





我 们 会 为 每 个 产品 添加 图 像 、 标 题 、 描 述 以 及 该 帖子 的 作者 头像 。 标 记 代码 如 下 所 示 : 
voting_app/public/js/app-2.js 

















class Product extends React.Component { 
render() { 
return ( 


) 
} 
} 


<div className='item'> 


<div className='image'> 
<img src="'images/products/image-aqua.png' /> 
</div> 
<div className='middle aligned content'> 
<div className='description'> 
<a>Fort Knight</a> 
<p>Authentic renaissance actors, delivered in just two weeks.</p> 
</div> 
《<div className='extra'> 
<span>Submitted by:</span> 
<img 
className='ui avatar image 
src= 'images/avatars/daniel.jpg' 
/> 
</divy> 
</div> 


</div> 


ReactDOM .render( 





上 面 代码 块 的 标题 表示 引用 了 本 书 代 码 包 中 位 于 voting_app/public/js/ 
app-2.js 路 径 下 的 代码 。 这 种 模式 在 本 书 中 很 常见 。 


如 果 你 想 要 将 标记 代码 复制 并 粘贴 到 app.js 中 ， 请 参考 此 文件 。 














这 里 的 代码 再 次 使 用 了 一 些 Semantic UI 样式 。 如 前 所 述 ，JSX 代码 将 被 转译 为 浏览 器 中 的 常规 
JavaScript。 因 为 JSX 在 浏览 器 中 是 以 JavaScript 的 方式 运行 的 ， 所 以 我 们 不 能 在 JSX 中 使 用 任何 
JavaScript 保留 字 。class 是 一 个 保留 字 。 因 此 ，React 让 我 们 使 用 className 属性 名 称 。 当 HIML 元 


素 到 达 页 面 




















时 ， 此 属性 名 称 会 被 写成 class。 











Product 组 件 在 结构 上 和 ProductList 组 件 相 似 。 两 者 都 有 render( ) 方 法 , 该 方法 用 来 返回 最 终 
需要 显示 在 页 面 上 的 HTML 的 结构 信息 。 














请 记 住 , JSX 组 件 实际 上 返回 的 不 是 最 终 要 泻 染 的 HTML ,而 是 我 们 希望 React 去 演 
数 到 DOM 中 的 表示 。 
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要 使 用 Product 组 件 ， 我 们 可 以 修改 ProductList 父 组 件 的 render( ) 方 法 输出 ， 来 包含 Product 
子 组 件 : 


voting_app/public/js/app-2.js 





class ProductList extends React .Component { 

render() { 
return ( 

<div className='ui unstackable items '> 
<Product /> 

</div> 

); 
} 

} 





保存 app.js 并 刷新 Web 浏览 器 ， 见 图 1-8。 


©O0 (potons 


€ DH G [localhost:3000 











Popular Products 


= Fort Knight 
[ | Authentic renaissance actors, delivered injust two weeks. 








1-8 刷新 Web 浏览 器 之 后 的 页 面 





通过 修改 ， 现 在 应 用 程序 中 已 演 染 了 两 个 React 组 件 。ProductList 父 组 件 将 Product 组 件 演 染 
为 铝 套 在 其 根 div 元 素 下 的 子 组 件 。 
虽然 看 起 来 很 巧妙 ,但 此 时 Product 子 组 件 是 静态 的 。 我 们 对 图 像 、 名 称 、 描 述 和 作者 的 详细 信 
息 进行 了 硬 编码 。 要 把 组 件 用 得 更 有 意义 一 些 , 需要 将 其 更 改 为 数据 驱动 的 方式 , 因此 组 件 是 动态 的 。 














1.8 让 数据 驱动 Product 组 件 


使 用 数据 驱动 Product 组 件 , 我 们 将 能 够 根据 所 提供 的 数据 动态 泻 染 组 件 。 让 我 们 熟悉 一 下 产品 
的 数据 模型 。 
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1.8.1 数据 模型 


在 这 个 示例 代码 中 ，public/js 里 包含 了 一 个 名 为 seed. js 的 文件 。seed. js 文件 包含 了 产品 的 
一 些 示 例 数据 ( 它 将 “播种 ”出 应 用 程序 的 数据 ), 还 包含 一 个 名 为 Seed .products 的 JavaScript 对 象 。 
Seed.products 是 一 个 JavaScript 对 象 数组 ， 每 个 元 素 代表 一 个 产品 对 象 : 


voting_app/public/js/seed.js 





const products = [ 
{ 
if 寺 ， 
title: "Yellow Pail '， 
description: 'On-demand sand castle construction expertise.', 
Url: “es; 
votes: generateVoteCount(), 
submitterAvatarUrl: 'images/avatars/daniel .jpg', 
productImageUr1: 'images/products/image-agqua.png', 


}; 





每 个 产品 都 有 唯一 的 id 和 少量 的 属性 ， 包 括 title 和 description。 使 用 seed.js 包含 的 


generateVoteCount( ) 函数 可 以 为 每 个 产品 生成 随机 投票 。 
可 以 在 React 代码 中 使 用 相同 的 属性 键 。 


1.8.2 ”使 用 props 

我 们 想 要 修改 Product 组 件 , 让 它 不 再 使 用 静态 的 硬 编码 属性 , 而 是 接收 从 ProductList 父 组 件 
传递 下 来 的 数据 。 用 这 种 方式 设置 组 件 结构 能 够 让 ProductList 组 件 动 态 地 演 染 任意 数量 的 Product 
组 件 ， 且 每 个 Prodquct 组 件 都 有 自己 独特 的 属性 。 数 据 流 图 见 图 1-9。 

















React 中 数据 从 父 组 件 流向 子 组 件 是 通过 props 实现 的 。 当 父 组 件 演 染 子 组 件 时 ， 它 可 以 给 子 组 
件 发 送 其 依赖 的 props。 

让 我 们 看 看 它 是 如 何 运作 的 。 首 先 ， 修改 ProductList 组 件 并 将 props 传递 给 Product 组 件 。 
seed.js 可 以 让 我 们 不 必 手 动 创建 一 堆 数据 。 从 Seed.products 数组 中 取出 第 一 个 对 象 ,， 并 将 其 用 作 


1-9 ”数据 流 图 
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单个 产品 的 数据 : 
voting_app/public/js/app-3.js 





class ProductList extends React.Component { 


render() { 
const product = Seed.products[0]; 
return ( 
<div className='ui unstackable items'> 
<Product 


id={product .id} 
title={product .title} 
description={product .description} 
url={product .url1} 
votes={product .votes} 
submitterAvatarUrl={product .submitterAvatarUr1} 
productImageUr1l={product .productImageUr1} 
As 
</div> 
多 
} 
} 

















这 里 product 变量 被 设置 为 用 来 描述 第 一 个 产品 的 JavaScript 对 象 。 我 们 使 用 [propName]= 
[propValue] 语 法 将 产品 的 所 有 属性 单独 传递 给 Product 组 件 。 在 JSX 中 分 配属 性 的 语法 和 HTML 、 
XML 完全 相同 。 

这 里 有 两 个 有 趣 的 事情 。 第 一 个 是 包 庄 每 个 属性 值 的 大 括号 ({} ): 

voting_app/public/js/app-3.js 


























id={product .id} 





在 JSX 中 ， 大 括号 是 一 个 分 隔 符 ， 它 向 JSX 发 出 信号 ， 表 明 大 括号 之 间 的 内 容 是 JavaScript 表 
达 式 。 男 一 个 分 隔 符 是 引号 ， 它 用 来 表示 字符 串 ， 如 下 所 示 : 


Ed=" 和 4* 

















个 JSX 属性 值 必 须 由 大 括号 或 引号 分 隔 。 
如 果 类 型 很 重要 并 且 需 要 传递 一 个 类 似 Number 或 null 的 类 型 ， 请 使 用 大 括号 。 


@ 如 果 你 之 前 使 用 过 ES5 JavaScript 编程 ， 则 可 能 习惯 使 用 var 而 不 是 const 或 let。 
有 关 这 些 新 声明 的 更 多 信息 ， 请 参见 附录 B。 


现在 ProductList 组 件 已 将 props 传递 给 Product 组 件 了 。 不 过 Product 组 件 尚 未 使 用 它们 ， 
让 我 们 修改 该 组 件 来 使 用 这 些 props。 

在 React 中 , 组 件 可 以 通过 this.props 对 象 访问 所 有 的 props。Product 组 件 内 部 的 this.props 
对 象 如 下 所 示 : 


{ 
po 4 
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"title": "Yellow Pail", 


"description": "On-demand sand castle construction expertise.", 
"Url™": "#", 

"votes": 41, 

"submitterAvatarURL": "images/avatars/daniel. jpg", 
"productImageUr1": "images/products/image-aqua.png" 


} 
让 我 们 使 用 props 替换 所 有 硬 编码 的 数据 。 在 这 里 , 我 们 会 添加 更 多 标记 代码 , 如 描述 和 投票 图 标 : 
voting_app/public/js/app-3.js 





























class Product extends React.Component { 
render() { 
return ( 
<div className='item'> 
<dqiv className='image'> 
<img src={this.props.productImageUr1} /> 
</div> 
<div className='middle aligned content'> 
<div className='header'> 


<a> 
<i className='large caret up icon' /> 
</a> 
{this.props.votes} 
</div> 


<div className='description'> 
<a href={this.props.url}> 
{this.props.title} 
</a> 
<p> 
{this.props.description} 
</p> 
</div> 
<div className='extra'> 
<span>Submitted by:¢</span> 
<img 
className= 'ui avatar image 
src={this.props.submitterAvatarUr1} 
/> 
</div> 
</div> 
</div> 
) 
】 
} 








同样 ,在 JSX 内 部 的 任何 地 方 插入 一 个 变量 ,都 需要 用 大 括号 ({} ) 来 分 隔 变 量 。 注 意 ,我 们 插 
入 的 数据 像 是 标签 内 的 文本 内 容 ， 如 下 所 示 : 


voting_app/public/js/app-3.js 


























<div className='header'> 
<a> 
<i className='large caret up icon' /> 
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</a> 
{this.props.votes} 
/divy 


HTML 元 素 的 属性 赋值 也 同样 如 此 : 
voting_app/public/js/app-3.js 








<img src={this.props.productImageUr1l} /> 


以 这 种 方式 将 props 与 HTML 元 素 交 织 在 一 起 ， 是 我 们 创建 动态 的 、 数 据 驱 动 的 React 组 件 的 
方式 。 





@ this 是 JavaScript 中 的 特殊 关键 字 。this 的 细节 有 一 些 细微 差别 ,但 就 本 书 的 大 部 
分 内 容 而 言 , this 会 绑 定 到 React 组 件 类 。 所 以 edt, this.props 
时 ， 它 将 访问 组 件 上 的 props 属性 。 当 本 书后 面 的 章节 中 偏离 这 条 规则 时 ， 我 们 会 
指出 来 。 
有 关 this 的 详细 信息 ， 请 查看 MDN 上 的 this 页 面 。 


保存 更 新 的 app. js 文件 后 ， 再 次 刷新 Web 浏览 器 ， 见 图 1-10。 











四 让 二 ,图 Projectone x \Ea React 
GC © localhost:3000 次 | 注 


Popular Products 


< 56 
SA Yellow Pai 
On-demand sand castle construction expertise. 


图 1-10 刷新 Web 浏览 器 之 后 的 页 面 
ProductList 组 件 现 在 显示 单个 产品 ， 即 从 Seed 数组 中 提取 的 第 一 个 对 象 。 
现在 情况 变 得 有 趣 了 ， 即 Product 组 件 现 在 是 数据 驱动 的 。 根 据 接收 的 props ， 它 可 以 演 染 出 我 
们 喜欢 的 任何 产品 。 
代码 已 做 好 准备 , 可 以 让 ProductList 演 染 任意 数量 的 产品 。 只 需要 配置 此 组 件 来 演 染 一 定数 量 
的 Product 组 件 ， 每 个 组 件 对 应 一 个 我 们 想 在 页 面 上 表示 的 产品 。 
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1.8.3 泻 染 多 个 产品 


要 演 染 多 个 产品 ， 首 先 需 要 让 ProductList 组 件 生 成 一 个 Product 组 件数 组 。 每 个 Product 组 
件 来 源 于 Seed 数组 中 的 单个 对 象 。 我 们 将 使 用 map( ) 方 法 来 执行 此 操作 : 


voting_app/public/js/app-4.js 





class ProductList extends React.Component { 
render() { 
const productComponents = Seed.products.map((product) => ( 
<Product 
key={'product-' + product.id} 
id={product .id} 
title={product .title} 
description={product .description} 
url={product .url} 
votes={product .votes} 
submitterAvatarUrl={product .submitterAvatarUr1} 
productImageUrl={product .productImageUr1} 
/> 
) ) ; 








传递 给 map( ) 方 法 的 函数 返回 一 个 Product 组 件 。 这 个 Product 组 件 和 以 前 一 样 ， 是 使 用 props 
从 Seed 数组 中 拉 取 对 象 来 创建 的 。 


我 们 将 箭头 函数 传递 给 map() 方 法 。 箭 头 函 数 在 ES6 中 被 引入 。 有 关 它 的 更 多 信息 ， 








请 参阅 附录 B。 
因此 ，productComponents 变量 会 得 到 一 个 Product 组 件 的 数组 : 


// productComponents 数组 


[ 


<Product id={1} ... />， 
<Product id={2} ... />», 
<Product id={3} ... />», 
<Product id={4} ... /> 


] 

值得 注意 的 是 ， 我 们 能 够 在 return 内 部 的 JSX 中 表示 Product 组 件 实例 。 可 能 一 开始 看 起 来 拥 
有 一 个 包含 JSX 元 素 的 JavaScript 数组 似乎 很 奇怪 , 但 请 记 住 Babel 会 将 每 个 Product ( <Product /> ) 
组 件 的 JSX 表示 转译 为 常规 的 JavaScript: 


// productComponents 数组 在 JavaScript 中 是 这 样 的 
[ 








React .createElement(Product, { id: 1, ... }), 
React .createElement(Product, { id: 2, ... }), 
React .createElement(Product, { id: 3, ... }), 
React .createElement(Product, { id: 4, 加 
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Array 对 象 的 map() 方 法 

Array 对 象 的 map() 方 法 将 函数 作为 参数 。 它 使 用 数组 内 的 每 个 子 项 (在 本 例 中 为 Seed.products 
数组 中 的 每 个 对 象 ) 来 调用 此 函数 ， 并 使 用 每 个 函数 调用 的 返回 值 来 构建 一 个 新 数组 。 

因为 Seed.products 数组 有 四 个 子 项 ， 所 以 map() 方 法 会 调用 此 函数 四 次 ， 每 个 子 项 一 次 。 当 
map( ) 方 法 调用 此 函数 时 ， 它 将 每 个 子 项 作为 第 一 个 参数 传 入 。 此 函数 调用 的 返回 值 将 插入 map() 
方法 正在 构建 的 新 数组 中 。 在 处 理 完 最 后 一 个 子 项 后 ，map() 方 法 就 会 返回 这 个 新 数组 。 这 里 我 们 
把 这 个 新 数组 存储 在 productComponents 变量 中 。 





注意 key={'product-' + product.id} 属 性 的 使 用 。React 使 用 这 个 特殊 属性 为 

个 Product 组 件 的 每 个 实例 创建 唯一 绑 定 。 这 个 key 属性 不 是 我 们 的 Product 组 件 使 
用 的 ， 而 是 由 React 框架 使 用 。 它 是 一 个 特殊 属性 ， 第 5 章 将 深入 讨论 。 目 前 只 需 
注意 ， 对 于 列表 中 的 每 个 React 组 件 ， 该 属性 都 必须 是 唯一 的 。 


在 productComponents 变量 的 声 el 现在 我 们 需要 修改 render( ) 方 法 的 返回 值 。 之 前 我 们 
演 染 的 是 单个 Product 组 件 ， 下 面 可 以 泻 染 productComponents 数组 了 : 


voting_app/public/js/app-4.js 











return ( 
<div className='ui unstackable items'> 
{productComponents} 
</div> 


); 








刷新 页 面 ， 可 以 看 到 所 有 Seed 数组 列 出 的 四 种 产品 ， 见 图 1-11。 
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Popular Products 


2 63 


7 Yellow pail 
On-demand sand castle construction expertise. 
2 54 
Supermajorlty: The Fantasy Congress League 
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图 1-11 Seed 数组 列 出 的 四 种 产品 
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现在 总 共有 五 个 React 组 件 正在 运行 ,其 中 有 一 个 ProductList 父 组 件 ， 它 包含 四 个 Product 子 
组 件 ， 每 个 产品 对 象 都 来 自 于 seed. js 中 的 Seed.products 数组 ， 见 图 1-12。 


入 63 


Yellow Pail 
On-demand sand castle construction expertise. 
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Earn points when your favorite politicians pass legislation. 


@ 
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Tinfoild: Tailored tinfoil hats 
Wealready have your measurements and shipping address. 
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Haught or Naught 
High-minded or absent-minded? You decide. 


© 
图 1-12” ProgductList 组 件 内 的 Prodquct 组 件 


目前 产品 还 没有 按照 它们 的 票数 排序 ， 让 我 们 对 它们 进行 排序 。 我 们 使 用 Array 对 象 的 sort() 
方法 来 执行 此 操作 ， 然 后 在 构建 productComponents 数组 的 行 之 前 对 产品 进行 排序 : 
voting_app/public/js/app-S.js 

















class ProductList extends React .Component { 
Trender() { 
const products = Seed.products.sort((a, b) => ( 
b.votes - a.votes 
)); 
const productComponents = products.map((product) => ( 
<Product 








忆 


LE 


新 页 面 ， 可 以 看 到 产品 已 排 好 序 。 
sort( ) 方 法 改变 了 调用 它 的 原始 数组 。 虽 然 现 在 看 起 来 很 好 ， 但 在 本 书 的 其 他 地 方 
我 们 将 讨论 为 什么 改变 数组 或 对 象 是 一 种 危险 的 模式 。 
在 上 面 的 Produect 组 件 的 标记 代码 中 , 我 们 添加 了 一 个 “向 上 投票 ”的 搬入 符号 图 标 。 如 果 现 在 
点 击 其 中 任意 一 个 按钮 ， 会 发 现 没有 任何 反应 ， 因 为 还 没有 将 事件 连接 到 按钮 。 


虽然 我 们 在 Web 浏览 器 中 运行 了 一 个 以 数据 驱动 的 React 应 用 程序 ， 但 该 页 面 仍 缺 乏 交 互 性 。 虽 
然 React 提供 了 一 种 简单 、 干 净 的 方式 来 组 织 HTML ， 并 能 够 基于 灵活 、 动 态 的 JavaScript 对 象 驱动 
生成 HIML， 但 我 们 仍然 没有 发 掘 其 真正 的 能 力 : 创建 动态 接口 。 


本 书 的 其 余部 分 将 深入 研究 这 种 能 力 。 证 我 们 从 一 件 简单 的 事情 开始 : 赋予 产品 投票 的 能 力 。 

















26 第 1 章 第 一 个 React Web 应 用 程序 





© Array 对 象 的 sort() 方 法 接收 一 个 可 选 的 函数 作为 参数 。 如 果 省 略 该 函数 ， 它 将 只 

按 每 个 子 项 的 Unicode 代码 点 的 值 对 数组 进行 排序 。 这 不 是 程序 员 所 希望 的 。 如 果 
提供 了 函数 ， 则 它 会 根据 函数 的 返回 值 对 元 素 进行 排序 。 

在 每 次 迭代 中 ,参数 a 和 b 是 数组 中 的 两 个 后 续 元 素 。 排序 取决 于 函数 的 返回 值 : 


(1) 如 果 返 回 值 小 于 8， 则 a 应 排 在 前 面 ( 具有 较 低 的 索引 ); 
(2) 如 果 返 回 值 大 于 @， 则 b 应 排 在 前 面 ; 
(3) 如 果 返 回 值 等 于 8@， 则 保持 a 和 b 的 顺序 相对 于 彼此 不 变 。 


1.9 应 用 程序 的 第 一 次 交互 : 投票 事件 响应 

当 点 击 每 个 Product 组 件 上 的 向 上 投票 按钮 时 ,我 们 希望 它 能 更 新 该 Product 组 件 的 votes 属性 ， 
并 将 值 增加 1。 

但 Product 组 件 无 法 修改 它 的 票数 ， 因 为 this .props 对 象 是 不 可 变 的 。 


虽然 子 组 件 可 以 读 取 其 props， 但 无 法 修改 它们 。 子 组 件 不 是 其 props 的 所 有 者 。 在 我 们 的 应 古 
程序 中 ， 父 组 件 ProductList 拥有 props 并 提供 给 Product 组 件 。React 支持 单 向 数据 流 的 想法 。 这 
意味 着 数据 的 更 改 来 自 于 应 用 程序 的 “顶部 ”， 并 通过 其 包含 的 各 种 组 件 “ 向 下 ”传递 。 


2 子 组 件 不 是 其 props 的 所 有 者 。 父 组 件 拥有 子 组 件 的 props。 





























< 























productList 组 件 (产品 数据 的 所 有 者 ) 更 新 该 产品 的 票数 ; 然后 更 新 的 数据 将 从 ProductList 组 件 
向 下 流向 Product 组 件 。 


Product 组 件 需要 有 一 种 方法 让 ProductList 组 件 知道 它 的 向 上 投票 图 标 被 点 击 了 ; 接着 可 以 让 








在 JavaScript 中 ， 如 果 将 数组 或 对 象 视 为 不 可 变 ， 则 意味 着 我 们 不 能 或 不 应 该 对 它 
进行 修改 。 


1.9.1 事件 传递 

我 们 知道 父 组 件 通过 props 向 子 组 件 传递 数据 。 因 为 props 是 不 可 变 的 , 所 以 子 组 件 需要 某 种 方 
式 来 向 父 组 件 传递 事件 。 然 后 父 组 件 可 以 进行 任何 必要 的 数据 更 改 。 

也 可 以 将 函数 作为 props 传递 ， 并 可 以 让 ProductList 组 件 为 每 个 Product 组 件 提供 一 个 函数 ， 
以 便 它 在 向 上 投票 按钮 被 点 击 时 调用 ,通过 props 传递 函数 是 子 组 件 与 其 父 组 件 传 递 事 件 的 标准 方式 。 

让 我 们 看 看 它 是 如 何 运 作 的 。 首 先 通过 向 上 投票 按钮 向 控制 台 记 录 消息 ,然后 再 通过 它 增 加 目标 
产品 的 votes 属性 。 


ProductList 组 件 中 的 handleProductUpVote 函数 只 接收 一 个 名 为 productId 的 参数 ,该 函数 会 
将 产品 的 id 记录 到 控制 台 : 
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voting_app/public/js/app-6.js 





class ProductList extends React.Component { 
handleProductUpVote(product1Id) { 
console.1og(productId + ' was upvoted.'); 


} 


render() { 


接 下 来 ,该 函数 将 作为 属性 传递 给 每 个 Product 组 件 。 我 们 将 该 属性 命名 为 onVote: 
voting_app/public/js/app-6.js 

















const productComponents = products.map((product) => (人 
<Product 
key={ "product-' + product .id} 
id={product .id} 
title={product .title} 
description={product .description} 
url={product .url} 
votes={product .votes} 
submitterAvatarUrl={product .submitterAvatarUr1} 
productImageUr1l={product .productImageUr1} 
onVote={this.handleProductUpVote} 
/> 
)); 


现在 可 以 通过 this.props.onVote 属性 在 Product 组 件 中 访问 此 函数 。 


让 我 们 在 Product 组 件 中 编写 函数 来 调用 这 个 新 的 属性 函数 ， 并 将 该 函数 命名 为 
handleUpVote( ): 






































voting_app/public/js/app-6.js 


// 在 Product 组 件 内 
handleUpVote() { 
this.props.onVote(this.props.id); 





render() { 

我 们 使 用 产品 的 id 作为 参数 来 调用 this .props .onVote 属性 函数 。 现 在 只 需 在 用 户 每 次 单 击 插 
入 符号 图 标 时 调用 此 函数 即 可 。 

在 React 中 ， 可 以 使 用 onclick 这 个 特殊 属性 来 处 理 鼠 标点 击 事件 。 


我 们 可 以 在 HTML 的 a 标签 (向 上 投票 按钮 ) 上 设置 onclick 属性 ， 并 指示 它 每 次 被 点 击 时 调 
用 handleUpVote( ) 函数 : 























































































































voting_app/public/js/app-6.js 





{/* Inside ‘render. for Product. */} 
<div className='middle aligned content'> 
<div className='header'> 
<a onClick={this.handleUpVote}> 
<i className='large caret up icon' /> 
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</a> 
{this.props.votes} 
</div> 


当 用 户 单 击 向 上 投票 图 标 时 ， 它 会 触发 一 系列 的 函数 调用 。 

(1) 用 户 点 击 向 上 投票 图 标 。 

(2) React 调用 Product 组 件 的 handleUpVote( ) 也 

(3) handleUpVote( ) 范 数 调用 它 的 onVote 属性 函 
息 记录 到 控制 台 。 

还 需要 做 最 后 一 件 事 才能 完成 这 项 工作 。 在 handleUpVote( ) 函数 里 引用 this.props 对 象 : 
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数 。 该 函数 位 于 ProductList 父 组 件 内 ， 将 消 






































voting_app/public/js/app-6.js 





handleUpVote() { 
this.props.onVote(this.props.id); 
} 


这 里 是 比较 奇怪 的 部 分 : 在 render( ) 函数 中 工作 时 ， 我们 已 目睹 了 this 总 是 绑 定 到 当前 组 件 ， 
但 在 自 定 义 的 组 件 方 法 handleUpVote( ) 中 ，this 的 值 实际 上 是 null。 


1.9.2 ” 绑 定 自 定 义 组 件 方法 

在 JavaScript 中 ， 特 殊 的 this 变量 根据 上 下 文具 有 不 同 的 绑 定 。 例 如 ， 在 render( ) 函数 中 this 
被 “ 绑 定 ”到 当前 组 件 。 换 名 话说 ，this“ 引 用 ”这 个 组 件 。 

理解 this 的 绑 定 是 学 习 JavaScript 编程 最 棘手 的 部 分 之 一 。 鉴 于 此 ，React 初学 者 一 开始 不 理解 
this 的 所 有 细节 是 没有 问题 的 。 

简 而 言 之 ,我 们 希望 nandleUpVote( ) 函数 内 部 的 this 引用 当前 组 件 ， 就 像 在 render( ) 郴 数 中 
一 样 。 但 是 为 什么 render() 函数 中 的 this 引用 的 是 当前 组 件 ， 而 handleUpVote( ) 函数 中 的 this 却 
不 是 呢 ? 

对 于 render( ) 函数 ，React 自动 帮 有 我 们 把 this 绑 定 到 当前 组 件 。React 指定 一 组 默认 的 特殊 API 
方法 。render() 就 是 这 样 的 一 个 方法 。 我 们 将 在 本 章 末 尾 看 到 ，componentDidMount() 是 另 一 个 特殊 
的 API 方 法 。 对 于 每 个 特殊 的 React 方法 ，React 会 自动 将 this 变量 绑 定 到 组 件 。 
因此 ， 当 我 们 自 定义 组 件 方法 时 ， 就 必须 手动 将 this 绑 定 到 自己 的 组 件 。 这 是 常用 的 一 种 模式 。 


将 以 下 constructor() 函 数 添 加 到 Product 组 件 的 顶部 : 























































































































voting_app/public/js/app-6.js 





class Product extends React.Component { 
constructor(props) { 
super(props); 


this.handleUpVote = this.handleUpVote.bind(this); 
} 


constructor( ) 函数 是 JavaScript 类 中 的 一 个 特殊 函数 。 任何 情况 下 通过 类 创建 对 象 时 , JavaScript 
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i 向 对 象 语言 ， 那 么 知道 React 在 初始 化 组 件 

















就 会 调用 constructor( ) 函数 。 如 果 你 之 前 从 未 使 用 过 也 
时 首先 会 调用 constructor( ) 函数 就 足够 了 。React 将 组 件 的 props 作为 参数 来 调用 constructor() 
函数 。 
因为 constructor( ) 函数 在 组 件 初始 化 时 被 调用 ， 所 以 本 书 会 将 它 用 于 几 种 不 同类 型 的 情况 。 就 
当前 的 目的 而 言 ， 只 需 知道 ， 当 想 要 将 自 定 义 组 件 方法 绑 定 到 React 组 件 类 时 ,就 可 以 使 用 这 种 模式 : 





class MyReactComponent extends React .Component { 


constructor(props) { 
super(props); // 总 是 先 调 用 这 个 方法 


// 自 定义 方法 在 这 里 绑 定 
this.someFunction = this.someFunction.bind(this); 


} 
} 


有 关 此 模式 的 详细 信息 ， 请 参阅 附加 栏 “在 constructor( ) 函数 中 绑 定 ”。 
本 章 的 末尾 将 使 用 一 个 实验 性 的 JavaScript 特性 来 绕 过 这 个 模式 ,但 是 ,在 使 用 常规 ES7 JavaScript 
时 ， 请 务必 牢记 这 个 模式 。 
当 定 义 自 己 的 React 组 件 类 方法 时 ， 必 须 在 constructor() 函 数 中 执行 绑 定 模式 ， 


用 以 便 this 能 引用 组 件 。 
保存 更 新 后 的 app.js， 并 刷新 Web 浏览 器 ， 然 后 点 击 向 上 投票 按钮 ， 可 以 看 到 一 些 文本 会 记录 


到 JavaScript 控制 台 ， 见 图 1-13。 
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图 1-13 一 些 文本 记录 到 JavaScript 控制 台 





可 以 看 到 ， 事 件 正在 向 父 组 件 传递 ! 
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ProductList 组 件 是 产品 数据 的 所 有 者 。 现 在 只 要 有 用 户 对 产品 进行 投票 ，Product 组 件 就 会 通 
知 其 父 组 件 。 下 一 个 任务 是 更 新 产品 的 票数 。 


但 在 哪里 执行 更 新 操作 呢 ? 目前 应 用 程序 还 没有 存储 和 管理 数据 的 地 方 。Seed 对 象 应 该 被 视 为 示 
例 的 种 子 数据 ， 而 不 是 应 用 程序 的 数据 存储 。 


应 用 程序 目前 缺少 的 是 状态 。 
@ 事实 上 ， 我 们 可 能 想 要 更 新 Seed.products 数组 中 的 票数 ， 如 下 所 示 : 





























// 这 会 有 用 吗 ? 
Seed.products. forEach((product) => { 
if (product.id === productId) { 
product .votes = product.votes + 1; 
} 
上 


这 样 做 是 行 不 通 的 。 更 新 Seed 对 象 时 ，React 应 用 程序 不 会 被 告知 变化 。 在 UI 上 ， 
也 没有 迹象 表明 票数 增加 了 。 





在 constructor() 函 数 中 绑 定 

在 constructor() 函数 里 做 的 第 一 件 事 就 是 调用 super(props) 函数 。Product 类 继承 了 
React .Component 类 并 定义 了 自己 的 constructor() 函 数 。 通 过 调用 super(props) 函 数 ， 可 以 让 
父 类 的 constructor() 函数 被 优先 调用 。 

重要 的 是 , React.Component 类 定义 的 constructor() 函数 会 将 我 们 的 constructor() 函 数 内 部 
的 this 绑 定 到 组 件 。 因 此 ， 每 当 你 为 组 件 声明 constructor( ) 函 数 时 ， 始 终 优 先 调用 super( ) 通 
数 是 一 个 好 习惯 。 

在 调用 super() 函数 之 后 ， 需 要 在 自 定 义 组 件 方法 上 调用 bind( ) 方 法 : 

this .handleUpVvote = this.handleUpVote.bind(this); 

函数 的 bind() 方 法 允许 我 们 将 函数 体 中 的 this 变量 指定 到 需要 设置 的 地 方 。 这 是 一 种 常见 
的 JavaScript 模式 。 我 们 重新 定义 了 组 件 的 handleUpvote() 方 法 ， 并 将 其 赋值 到 相同 的 函数 ， 但 
绑 定 到 this 变量 (组 件 ) 下 。 现 在 ， 每 当 handleUpVote( ) 函数 执行 时 ，this 将 引用 当前 组 件 而 
不 是 null。 











1.9.3 ”使 用 state 

props 是 不 可 变 的 并 且 由 组 件 的 父 级 所 拥有 ， 而 state 由 组 件 拥有 。this .state 是 组 件 私 有 的 ， 
我 们 将 看 到 它 可 以 使 用 this.setState() 方 法 进行 更 改 。 

重要 的 是 ， 当 组 件 的 state 或 props 更 新 时 ， 组 件 会 重新 泻 染 。 


每 个 React 组 件 都 是 作为 一 个 由 this.props 和 this.state 组 成 的 函数 来 泻 染 的 。 这 种 泻 染 是 
确定 性 的 。 这 意味 着 若 给 定 一 组 props 和 一 组 state，React 组 件 将 始终 以 一 种 方式 泻 染 。 如 本 章 开 
头 所 述 ， 这 种 方式 能 确保 UI 的 强 一 致 性 。 
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因为 我 们 正在 修改 产品 的 数据 (票数 )， 所 以 应 该 认为 这 些 数据 是 有 状态 的 。ProductList 组 件 
将 是 此 状态 的 所 有 者 。 它 会 将 state 作为 props 传递 给 Product 组 件 。 





xy 














目前 ，ProductList 组 件 直 接 在 render( ) 函数 中 读 取 Seed 对 象 以 获取 产品 数据 。 让 我 们 将 这 些 
数据 迁移 到 组 件 的 state 中 。 


将 state 添加 到 组 件 时 ， 要 做 的 第 一 件 事 是 定义 state 的 初始 值 。 因 为 在 初始 化 组 件 时 调用 了 
constructor( ) 限 数 ， 所 以 它 是 定义 state 初始 值 的 最 佳 位 置 。 





























在 React 组 件 中 ，state 是 一 个 对 象 。ProductList 组 件 中 的 state 对 象 的 结构 如 下 所 示 : 


// ProductList 组 件 的 state 对 象 的 结构 
{ 
products: 《ArTay>， 


} 


我 们 会 将 state 初始 化 为 空 的 products 数组 对 象 , 将 此 constructor( ) 函数 添加 到 ProductList 
组 件 中 : 


voting_app/public/js/app-7.js 





class ProductList extends React.Component { 
constructor(props) { 
super(props); 


this.state = { 
products: [], 
}; 
} 


componentDidMount() { 


this.setState({ products: Seed.products }); 
} 





与 Product 组 件 中 的 constructor( ) 函数 调用 一 样 , 这 个 constructor( ) 函数 中 的 第 一 行 同样 是 
调用 super(props ) 函数 。 我 们 为 React 组 件 编写 的 任何 constructor( ) 的 第 一 行 总 是 相同 的 。 




















从 技术 上 讲 , 因 为 我 们 没有 提供 任何 props 给 ProductList 组 件 , 所 以 不 需要 将 props 
参数 传递 给 super()。 但 这 是 一 个 好 习惯 ， 可 以 帮助 避免 将 来 出 现 奇 怪 的 错误 。 











在 state 初始 化 后 ， 我 们 接 下 来 修改 ProductList 组 件 的 render( ) 函 数 ， 使 它 使 用 state 而 不 
是 从 Seed 对 象 中 读 取 。 我 们 用 this .state 来 读 取 state: 


voting_app/public/js/app-7.js 











render() { 


const products = this.state.products.sort((a, b) => ( 
b.votes - a.votes 


放生 








ProductList 组 件 现在 已 由 自己 拥有 的 状态 驱动 了 。 如 果 现 在 保存 并 刷新 , 所 有 的 产品 都 会 消失 。 
是 因为 在 ProductList 组 件 中 没有 任何 机 制 可 以 将 产品 添加 到 它 的 state 中 。 























[be 
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1.9.4 使 用 this.setState() 设 置 state 

如 之 前 所 做 的 那样 ， 将 组 件 的 state 初始 化 为 “ 空 ”是 一 种 很 好 的 做 法 。 第 3 章 介绍 与 服务 器 异 
步 工 作 时 将 探讨 这 背后 的 原因 。 

然而 在 组 件 初始 化 后 ， 我 们 希望 使 用 Seed 对 象 中 的 数据 为 ProductList 组 件 的 state 赋值 。 

React 指定 了 一 组 生命 周期 方法 。 在 组 件 挂 载 到 页 面 之 后 ，React 会 调用 componentDidMount() 生 
命 周 期 方法 。 我 们 将 在 此 方法 中 为 ProductList 组 件 的 state 赋值 。 


S 第 5 章 将 探讨 其 余 的 生命 周期 方法 。 





















































知道 了 这 一 点 后 ， 可 以 在 componentDidMount() 方 法 中 将 state 设置 为 Seed.products 数组 : 


class ProductList extends React .Component { 
六 
// 这 样 有 效果 吗 
componentDidMount() { 
this.state = Seed.products ; 
| 
OO 
} 
然而 这 样 做 是 无 效 的 。constructor( ) 函数 是 唯一 能 以 这 种 方式 修改 state 的 地 方 。React 为 组 
件 提 供 了 this.setstate() 方 法 ， 用 于 state 初始 化 之 后 的 所 有 修改 操作 。 除 此 之 外 ,该 方法 会 触发 
React 组 件 重 新 演 染 ， 这 在 state 更 改 后 非常 重要 。 


2 永远 不 要 在 this.setState() 方 法 之 外 修改 state。 它 为 state 修改 提供 了 重要 的 
Hook， 我 们 不 能 绕 过 它 。 
本 书 详细 讨论 了 state 的 管理 。 


下 面 将 componentDidMount() 也 数 添加 到 ProductList 组 件 中 。 我 们 将 使 用 setState( ) 方 法 来 
为 组 件 的 state 赋值 : 


voting_app/public/js/app-8.js 




















class ProductList extends React .Component { 
constructor(props) { 
super(props); 


this.state = { 
products: [], 
} 
} 


componentDidMount() { 
this.setState({ products: Seed.products }); 
} 


该 组 件 在 挂 载 时 state 是 一 个 空 的 this.state.products 数组 。 挂 载 后 ,我 们 使 用 Seed 对 象 的 
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数据 为 state 赋值 。 该 组 件 将 重新 泻 染 ， 产 品 也 将 显示 出 来 。 这 是 以 用 户 察觉 不 到 的 速度 发 生 的 。 
如 果 现 在 保存 并 刷新 ， 可 以 看 到 产品 又 回来 了 。 
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现在 ProductList 组 件 正在 使 用 state 管理 产品 , 我 们 准备 修改 这 些 数 据 以 响应 用 户 输入 。 具体 
来 说 ， 我 们 希望 当 用 户 投 票 时 增加 产品 的 votes 属性 。 

我 们 刚刚 讨论 过 只 能 使 用 this.setState() 方 法 修改 state。 因 此 ,虽然 组 件 可 以 修改 它 的 state， 
但 我 们 应 该 将 this.state 对 象 视 为 不 可 变 的 。 

如 前 所 述 ， 如 果 我 们 将 数组 或 对 象 视 为 不 可 变 ， 就 永远 不 会 对 它 进 行 修 改 。 例 如 ， 假 设 在 state 
中 有 一 组 数字 : 

this.setState({ nums: [ 1, 2, 3 ] }); 


如 果 想 要 修改 state 的 nums 数组 以 包含 4， 我 们 可 能 会 尝试 像 下 面 这 样 使 用 push( ) 方 法 : 


this.setState({ nums: this.state.nums.push(4) }); 


从 表面 上 看 ， 我 们 似乎 将 this .state 视 为 不 可 变 的 ,但 push( ) 方 法 修改 了 原始 数组 : 


console.1og(this.state.nums ) ; 
// [1,2,3] 
this.state.nums.push(4); 
console.1og(this.state.nums); 
// [1, 2, 3, 4] <-- Uh-oh! 


我 们 把 4 推 人 数组 后 立即 调用 了 this.setState() 方 法 ， 但 依然 在 setState( ) 方 法 之 外 修改 了 
this .state， 这 是 不 好 的 做 法 。 






































这 种 做 法 不 好 的 部 分 原因 是 setState() 方 法 实际 上 是 异步 的 。 我 们 无 法 保证 React 
在 什么 时 候 会 更 新 状态 并 重新 泻 染 组 件 。 第 5 章 将 对 此 进行 探讨 。 


因此 在 最 终 调 用 this.setState() 方 法 时 ， 我 们 无 意 中 修改 了 state。 
下 面 的 方法 也 不 起 作用 : 


const nextNums = this.state.nums; 
nextNums .push(4) ; 
console.1og(nextNums ) ; 

// [1, 2, 3, 4] 
console.1log(this.state.nums); 

// [ 1, 2, 3, 4] =-- Nope! 


新 变量 nextNums 与 this.state.nums 引用 的 是 内 存 中 的 相同 数组 ， 见 图 1-14。 
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图 1-14 ”两 个 变量 都 引用 了 内 存 中 的 相同 数组 
因此 ， 在 使 用 push( ) 方 法 修改 数组 时 ， 我 们 也 在 修改 this .state.nums 指向 的 相同 数组 。 


不 过 可 以 使 用 Array 对 象 的 concat( ) 方 法 代替 。coneat() 方 法 创建 了 一 个 新 数组 ， 该 数组 包含 
调用 它 的 数组 元 素 ， 后 面 是 作为 参数 传人 的 元 素 。 


使 用 concat() 方 法 ， 可 以 避免 修改 state: 


console.log(this.state.nums ) 

// [1,2,3] 

const nextNums = this.state.nums.concat(4); 
console.1og(nextNums ) ; 

A [23,4 
console.1log(this.state.nums); 

// [1, 2, 3 ] <-- Unmodified! 

















整 本 书 都 会 涉及 不 变性 。 虽 然 在 许多 情况 下 可 以 通过 修改 state 来 “侥幸 成 功 ”， 但 更 好 的 做 法 
是 将 state 视 为 不 可 变 的 。 


2 将 state 对 象 视 为 不 可 变 的 ， 对 于 了 解 这 些 对 象 是 被 哪些 Array 和 Object 的 方法 
调用 并 修改 的 非常 重要 。 





@ 如 果 数 组 作为 参数 传 入 concat() 方 法 ， 那 么 它 的 元 素 将 附加 到 新 数组 ,例如 : 


> [1,2, 3 ].concat([ 4, 5 ]); 
> | 





知道 了 我 们 想 要 将 state 视 为 不 可 变 的 ， 下 面 处 理 向 上 投票 事件 的 方式 可 能 会 有 问题 : 
// 在 ProductList 组 件 里 面 
// 无 效 
handleProductUpVote(product1d) { 
const products = this.state.products; 
products. forEach((product) => { 
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if (product .id === productId) { 
product .votes = product .votes + 1; 

} 

和 

this .setState({ 
products: products, 

} 

} 


当 products 初始 化 为 this.state.products 时 ，products 与 this.state.products 都 引用 内 
存 中 相同 的 数组 ， 见 图 1-15。 





变量 | 内 存 





图 1-15 两 个 变量 都 引用 内 存 中 的 相同 数组 


因此 ， 当 我 们 通过 forEach( ) 方 法 增加 某 个 product 的 票数 来 修改 该 product 对 象 时 , 同时 也 修 
改 了 state 中 的 原始 product 对 象 。 


相反 ， 我 们 应 该 创建 一 个 新 的 产品 数组 。 如 果 要 修改 其 中 任意 一 个 产品 对 象 ， 应 该 修改 对 象 的 
副本 而 不 是 原始 对 象 。 

让 我 们 看 看 要 将 state 视 为 不 可 变 的 ，handleProductUpVote( ) 的 实现 是 什么 样 的 。 我 们 先 完整 
地 看 一 遍 ， 然 后 拆 开 讲解 : 

voting_app/public/js/app-9.js 

// 在 ProductList 组 件 内 

handleProductUpVote(product1d) { 

const nextProducts = this.state.products.map((product) => { 
if (product.id === productId) { 
return Object.assign({}, product, { 
votes: product.votes + 1, 


}); 
} else { 
return product; 
} 
}); 











36 第 1 章 第 一 个 React Web 应 用 程序 





this.setState({ 
products: nextProducts, 
}); 
} 





首先 , 使 用 map() 方 法 遍历 products 数组 。 重 要 的 是 ，map( ) 方 法 返回 新 数组 ， 而 不 是 修改 
this.state.products 数组 。 

















其 次 ， 比 较 当 前 product 是 否 与 productId 匹配 。 如 果 两 者 匹配 ， 那 么 创建 新 对 象 并 复制 原始 
product 对 象 的 属性 。 然 后 重 写 新 product 对 象 上 的 votes 属性 ， 并 将 其 赋值 为 增加 后 的 票数 。 我 们 
使 用 object 的 assign( ) 方 法 来 执行 这 些 操作 : 

voting_app/public/js/app-9.js 



































if (product.id === productId) { 
return Object.assign({}, product, { 
votes: product.votes + 1, 


} 





我 们 经 常 使 用 Object.assign( ) 方 法 来 避免 改 交 对 象 。、 有 关 该 方法 的 更 多 信息 ， 请 
©@ 查看 附录 B。 








如 果 当 前 product 不 是 productId 指定 的 产品 ， 则 将 其 原封 不 动 地 返回 : 
voting_app/public/js/app-9.js 








} else { 
return product; 


} 





最 后 使 用 setstate( ) 方 法 来 更 新 state。 
因为 map( ) 方 法 创建 了 新 数组 , 所 以 你 可 能 会 问 : 为 什么 不 能 直接 修改 product 对 象 呢 ? 像 这 样 : 


if (product .id === productId) { 
product .votes = product .votes + 1; 

} 

当 我 们 创建 一 个 新 数组 时 ， 它 的 product 变量 仍 引 用 位 于 state 中 的 原 数 组 里 的 product 对 象 。 
因此 ， 如 果 对 它 进行 修改 ,那么 也 会 修改 state 中 的 对 象 。 所 以 我 们 使 用 0bject .assign( ) 方 法 将 原 
product 对 象 克隆 到 新 对 象 中 ， 然 后 再 修改 新 对 象 上 的 votes 属性 。 

对 向 上 投票 的 state 修改 已 到 位 , 还 有 最 后 一 件 事 要 做 : 自 定义 的 handleProductUpVote( ) 组 件 
方法 现在 引用 this。 我们 需要 添加 一 个 bind( ) 方 法 调用 , 就 像 对 Product 组 件 中 的 handleUpVote() 
方法 那样 : 

voting_app/public/js/app-9.js 



























































class ProductList extends React.Component { 
constructor(props) { 
super(props); 


this.state = { 
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products: [], 
J 


this.handleProductUpVote = this.handleProductUpVote.bind(this); 
} 


现在 handleProductUpVote( ) 方 法 中 的 this 引用 的 就 是 当前 组 件 了 。 
应 用 程序 最 终 应 该 响应 用 户 的 交互 。 保 存 app. js 并 刷新 浏览 器 ， 见 图 1-16。 
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1-16 ”刷新 浏览 器 之 后 的 页 面 


票 计数 器 终于 可 以 正常 工作 了 ! 尝试 对 一 个 产品 进行 多 次 投票 ， 并 注意 看 它 如 何 超过 票数 较 少 
的 产品 。 


1.11 用 Babel 插件 重 构 transform-class-properties 
本 节 将 探索 使 用 实验 性 的 JavaScript 特性 对 类 组 件 进 行 重 构 的 可 能 性 。 你 很 快 就 会 明白 这 个 特性 
在 React 开发 人 员 中 受 欢迎 的 原因 。 由 于 社区 依然 在 采纳 此 特性 ， 因 此 本 书 会 向 你 展示 两 种 类 组 件 
我 们 可 以 使 用 Babel 的 插件 和 预 设 库 来 使 用 此 特性 。 
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1.11.1 ”Babel 插 件 和 预 设 
这 个 项 目 一 直 使 用 Babel, 它 使 我 们 能 够 编写 时 瞩 的 JavaScript, 并 能 在 大 多 数 Web 浏览 器 中 运行 。 
具体 来 说 ， 我 们 的 代码 一 直 使 用 Babel 将 ES6 语 法 和 JSX 转换 为 vanilla ES5 JavaScript。 
有 几 种 方法 可 以 将 Babel 集成 到 项 目 中 。 我 们 一 直 在 使 用 babel-standalone, 它 可 以 让 我 们 快速 
设置 Babel 以 便 直接 在 浏览 器 中 使 用 。 
babel-standalone 默认 使 用 两 个 预 设 。 在 Babel 中 ， 预 设 是 一 组 用 于 支持 特定 语言 特性 的 插件 。 
Babel 一 直 使 用 两 个 默认 预 设 。 
e@ es2015: 添加 对 ES2015 (或 称 为 ES6 ) JavaScript 的 支持 。 
@ react: 添加 对 JSX 的 支持 。 
请 记 住 ，ES2015 只 是 ES6 的 另 一 个 名 称 。 此 项 目 使 用 Babel 默认 的 es2015 预 设 ， 
因为 无 须 使 用 ES7 的 两 个 新 特性 。 
JavaScript 是 一 种 不 断 变 化 的 语言 。 按 照 目前 的 速度 ， 每 年 都 会 批准 采用 新 的 语法 。 
由 于 JavaScript 会 继续 发 展 , 像 Babel 这 样 的 工具 会 继续 存在 ,开发 人 员 和 希望 能 利用 最 新 的 语言 特性 ， 
但 浏览 器 需要 时 间 来 更 新 其 JavaScript 引 擎 ， 而 且 大 众 需 要 更 多 的 时 间 将 浏览 器 升级 到 最 新 版 本 。Babel 
缩小 了 这 个 差距 。 它 的 代码 库 能 够 与 JavaScript 一 起 发 展 ， 而 不 会 抛弃 旧 的 浏览 
除了 ES7 之 外 ， 后 面 提出 的 JavaScript 特性 可 以 存在 于 各 个 阶段 。 一 个 特性 可 以 是 实验 提案 ， 社 
区 仍 在 制定 细节 (“第 1 阶段 ”), 实验 提案 存在 随时 被 删除 或 修改 的 风险 。 或 者 某 个 特性 可 能 已 被 “ 批 
准 ”， 这 意味 着 它 将 包含 在 下 一 版 本 的 JavaScript 中 (“第 4 阶段 ”)。 
我 们 可 以 使 用 预 设 和 插件 自 定 义 Babel， 以 利用 这 些 即将 推出 的 或 实验 性 的 特性 。 
本 书 一 般 会 避免 使 用 实验 性 特性 ， 但 有 一 个 看 起 来 要 被 批准 的 特性 例外 : 属性 初始 化 器 。 
避免 使 用 实验 性 特性 ， 因 为 我 们 不 希望 教授 可 能 被 修改 或 删除 的 特性 。 对 于 你 自己 
@ 的 项 目 ， 使 用 JavaScript 特性 的 “严格 ”程度 取决 于 你 和 你 的 团队 。 
想 了 解 更 多 有 关 Babel 预 设 和 插件 的 信息 ， 请 在 Babel 网 站 搜索 Plugins 查看 相关 
文 档 oO 


1.11.2 属性 初始 化 器 


有 关 属 性 初始 化 器 的 详细 信息 ， 请 在 GitHub 网 站 搜索 proposal-class-public-fields， 查 看 提案 “ES 
Class Fields & Static Properties"。 昌 然 实验 性 特性 尚未 被 批准 ， 但 属性 初始 化 器 提供 了 一 个 引 人 注 目的 
语法 ， 大 大 简化 了 React 类 组 件 。 该 特性 与 React 搭配 使 用 效果 非常 好 。 
属性 初始 化 器 能 在 Babel 插件 transform-class-properties 中 使 用 。 回 想 一 下 , 在 index.html 
中 我 们 为 app. js 指定 了 这 个 插件 : 


<script 
type="text/babel" 
data-plugins="transform-class-properties" 
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src="./js/app.js" 
></script> 


因此 ， 我们 已 准备 好 在 代码 中 使 用 此 特性 。 了 人 解 此 特性 的 最 佳 方式 是 观察 它 的 实际 应 用 。 


1.11.3” 重 构 Product 组 件 
在 Product 组 件 中 , 我们 定义 了 组 件 方 法 handleUpVote( )。 如 前 所 述 ， 因 为 handleUpVote() 方 
法 不 是 标准 React 组 件 API 中 的 一 部 分 ， 所 以 React 不 会 将 该 方法 内 部 的 this 绑 定 到 组 件 。 因 此 我 们 
必须 在 构造 函数 中 手动 执行 绑 定 : 
voting_app/public/js/app-9.js 
























































class Product extends React.Component { 
constructor(props) { 
super(props); 


this.handleUpVote = this.handleUpVote.bind(this); 
} 


handleUpVote() { 
this.props.onVote(this.props.id); 


} 
render() { 


使 用 transform-class-properties 插件 ， 我 们 可 以 将 handleUpVote 写 为 箭头 函数 。 这 会 确保 
函数 内 部 的 this 能 绑 定 到 当前 组 件 ， 正 如 预期 ; 
voting_app/public/js/app-complete.js 




















class Product extends React.Component { 
handleUpVote = () => ( 

this.props.onVote(this.props.id) 

); 


render() { 








使 用 此 特性 ， 可 以 删除 constructor() 函 数 ， 无 须 手动 绑 定 调用 。 
请 注意 ，render( ) 之 类 的 方法 是 标准 React API 的 一 部 分 ， 依 然 会 被 保留 为 类 方法 。 如 果 我 们 编 
写 一 个 自 定义 组 件 方 法 并 希望 将 this 绑 定 到 组 件 ， 就 可 以 使 用 箭头 函数 来 写 。 
























































1.11.4 重 构 ProductList 组 件 
可 以 对 ProductList 组 件 中 的 handleProductUpVote 函数 进行 相同 的 处 理 。 此 外 ， 属 性 初始 化 
器 提供 了 一 种 可 选 的 定义 组 件 初始 状态 的 方法 。 
之 前 我 们 使 用 ProductList 组 件 中 的 constructor( ) 函数 将 handleProductUpVote 函数 绑 定 到 
组 件 并 定义 了 组 件 的 初始 状态 : 
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class ProductList extends React .Component { 
constructor(props) { 
super(props); 


this.state = { 
products: []， 


}; 
this.handleProductUpVote = this.handleProductUpVote.bind(this); 
} 
使 用 属性 初始 化 器 ， 就 不 再 需要 使 用 构造 函数 了 。 可 以 这 样 定义 初始 状态 : 


且 























voting_app/public/js/app-complete.js 
class ProductList extends React.Component { 


state = { 
products: [], 


} 
将 handleProductUpVote 定义 为 箭头 函数 ， 那 么 this 也 将 按照 我 们 的 期 望 绑 定 到 组 件 : 


























如 旺 
voting_app/public/js/app-complete.js 
handleProductUpVote = (product1Id) => { 
const nextProducts = this.state.products.map((product) => { 
if (product.id === productId) { 
return Object.assign({}, product, { 
votes: product.votes + 1， 
由) 
} else { 
return product; 
} 


}); 
this.setState({ 
products: nextProducts ， 


六 





} 
总 之 ， 可 以 使 用 属性 初始 化 器 为 React 组 件 进行 两 处 重 构 : 

(1) 使 用 箭头 函数 来 自 定 义 组 件 方 法 〈 避免 必须 要 绑 定 this ); 
(2) 在 constructor( ) 函 数 之 外 定义 初始 状态 。 


本 书展 示 了 两 种 方法 ， 因 为 它们 都 已 被 广泛 使 用 。 对 于 是 否 使 用 transform-class- properties 
插件 ,每 个 项 目 都 是 一 致 的 。 欢 迎 你 继续 在 自己 的 项 目 中 使 用 vanilla ES6。 不 过 ,transform-class- 
properties 插件 提供 的 简洁 性 往往 太 有 吸引 力 了 ， 而 不 容错 过 。 


@ 将 ES6/ES7 与 其 他 预 设 或 插件 一 起 使 用 有 时 被 社区 称 为 “ES6+/ES7+”。 
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1.12 ”祝贺 你 [ee 


我 们 刚刚 编写 了 第 一 个 React 应 用 程序 。 还 有 很 多 强大 的 特性 没有 介绍 ， 但 它们 都 建立 在 刚刚 介 
绍 的 核心 基础 之 上 : 

(1) 我 们 将 React 应 用 程序 视 为 组 件 ， 并 将 其 组 织 起 来 ; 

(2) 在 render() 方 法 中 使 用 JSX; 

(3) 通过 props 实现 数据 从 父 组 件 流向 子 组 件 ; 

(4) 通过 函数 实现 事件 从 子 组 件 流向 父 组 件 ; 

(5) 利用 React 生命 周期 方法 ; 

(6) 有 状态 的 组 件 以 及 state 与 props 的 不 同 之 处 ; 

(7) 如 何在 state 被 视 为 不 可 变 时 操作 它 。 

继续 前 进 吧 ! 
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2.1 计时 器 应 用 程序 





上 一 章 描述 了 React 如 何 将 应 用 程序 组 织 到 组 件 中 以 及 如 何在 父 组 件 和 子 组 件 之 间 传 递 数据 ， 并 
讨论 了 核心 概念 ， 比 如 如 何 管理 state 以 及 使 用 props 在 组 件 之 间 传 递 数 据 。 


本 章 将 构建 一 个 更 复杂 的 应 用 程序 。 向 ] 将 研究 一 种 模式 , 你 可 以 使 用 该 模式 从 头 开始 构建 React 
应 用 程序 ， 然 后 可 以 用 这 些 步骤 构建 计时 器 管理 界面 。 


在 这 个 时 间 跟 踪 应 用 程序 中 ， 用 户 可 以 添加 、 删 除 和 修改 各 种 计时 器 。 每 个 计时 右 都 对 应 用 户 想 
要 计时 的 不 同 任务 ， 见 图 2-1。 
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图 2-1 计时 器 对 应 于 用 户 想 要 计时 的 任务 
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此 应 用 程序 将 比 上 一 章 构 建 的 应 用 程序 具有 更 多 的 交互 功能 。 这 会 给 我 们 带 来 一 些 有 趣 的 挑战 ， 
并 加 深 我 们 对 React 核心 概念 的 熟悉 程度 。 











2.2 开始 

和 其 他 音节 一 样 ， 请 确保 你 已 下 载 了 本 书 的 示例 代码 并 准备 就 绪 。 
2.2.1 应 用 程序 预览 

下 面 从 一 个 完整 实现 的 应 用 程序 开始 。 


在 终端 中 ,使 用 cd 命令 进入 time_tracking_app 目录 : 
$ cd time_tracking_app 


使 用 npm 安装 所 有 依赖 项 : 

$ npm install 

然后 启动 服务 央 : 

$ npm start 

现在 可 以 在 浏览 需 中 查看 该 应 用 程序 了 。 打 开 浏 览 器 并 输入 http://localhost:3880。 
花 几 分 钟 来 体验 一 下 它 所 有 的 功能 。 刷 新 浏览 器 并 注意 我 们 的 更 改 已 持久 化 。 

















© 请 注意 ， 此 应 用 程序 与 投票 应 用 程序 使 用 了 不 同 的 Web 服务 器 。 此 应 用 程序 不 会 在 
浏览 器 中 自动 启动 ， 也 不 会 在 你 做 出 更 改 时 自动 刷新 。 


2.2.2 ”应 用 程序 准备 
在 终端 中 运行 1s 命令 来 查看 项 目的 布局 : 


$ 1s 

README .md 

data. json 
nightwatch. json 
node_modules/ 
package. json 
public/ 
semantic. json 
server.js 
tests/ 


这 和 上 一 个 项 目 相 比 有 一 些 结构 上 的 变化 。 


首先 ， 注 意 现在 项 目 中 有 一 个 server .js 文件。 上 一 章 使 用 了 预 构建 的 Node 包 ( 称 为 1ive-server ) 
来 提供 资源 。 


这 次 有 一 个 定制 服务 器 ， 它 提供 资源 ， 并 且 还 增加 了 一 个 持久 层 。 下 一 章 将 详细 介绍 服务 器 。 
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访问 网 站 时 ， 资 源 是 浏览 器 下 载 并 用 于 显示 该 页 面 的 文件 。 传递 到 浏览 器 的 
@ index.html 在 head 标签 内 指定 了 浏览 器 需要 从 服务 器 下 载 的 附加 文件 。 

上 一 个 项 目 中 资源 是 index.html、 样 式 表 和 图 片 。 

在 这 个 项 目 中 ，public 目录 下 的 所 有 文件 都 是 资源 。 


在 投票 应 用 程序 中 ， 我 们 从 JavaScript 变量 中 加 载 了 应 用 程序 的 所 有 初始 数据 ， 而 这 些 数据 又 是 
从 seed.js 文件 中 加 载 的 。 
这 一 次 ， 我 们 最 终 会 将 它 存储 在 data. json 文本 文件 中 。 这 种 做 法 更 接近 于 数据 库 。 通 过 使 用 
JSON 文件 ， 可 以 对 数据 进行 编辑 ， 即 使 应 用 程序 关闭 了 ， 这 些 数据 也 会 被 持久 化 。 
JSON 的 全 称 是 JavaScript Object Notation， 它 使 我 们 能 够 序列 化 JavaScript 对 象 并 可 
如 果 不 熟 悉 JSON， 可 以 查看 data. json 文件 。 很 容易 识别 ， 对 吧 ? JavaScript 有 一 
种 内 置 的 机 制 来 解析 此 文件 的 内 容 并 使 用 它 的 数据 来 初始 化 JavaScript 对 象 。 


看 public 目录 : 


$ cd public 
$ 1s 


这 里 的 结构 与 上 一 个 项 目 相 同 : 


favicon.ico 
index.html 
js/ 
semantic/ 
style.css 
vendor/ 


index.html 也 是 这 个 应 用 程序 的 核心 。 它 是 包含 所 有 JavaScript 和 CSS 文件 的 地 方 , 也 是 我 们 指 
定 最 终 挂 载 React 应 用 程序 的 DOM 节点 的 地 方 。 

这 里 再 次 使 用 Semantic UI 进行 样式 设计 。 所 有 Semantic UI 的 资源 都 在 semantic/ 目 录 下 面 ， 而 
所 有 的 JavaScript 文件 都 在 js/ 目 录 下 : 


$ 1s js/ 
app-1.js 
app-2.js 
app-3.js 
app-4.js 
app-5.js 
app-6.js 
app-7.js 
app-8.js 
app-9.js 
app-complete.js 
app.js 
client.js 
helpers.js 


我 们 将 在 app. js 中 构建 应 用 程序 。 下 一 章 将 完成 的 应 用 程序 的 完整 版 本 代码 位 于 app-complete. js 
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中 。 我 们 经 历 的 每 个 步骤 都 包括 在 这 里 : app-1.js、app-2.js 等 。 和 上 一 章 一 样 ， 本 章 中 的 代码 示 





例 以 文件 目录 为 标题 ， 以 帮助 你 在 文件 中 找到 该 示例 。 











另外 ， 此 项 目 将 使 用 一 些 额 外 的 JavaScript 文件 。 我 们 会 看 到 cl ient . js 包含 了 下 一 章 中 用 来 与 


服务 器 连接 的 函数 。helpers .js 包含 了 一 些 组 件 会 使 用 的 辅助 函数 。 



































和 以 前 一 样 ， 第 一 步 是 要 确 





app.js 文件 。 
打开 index.html: 




















保 在 index.html 中 不 再 加 载 app-complete. js。 需 要 改 为 加 载 空 的 





time_tracking app/public/index.html 





<1DOCTYPE html> 
<html> 


<head> 


<meta charset="utf-8"> 
<title>Project Two: Timers</title> 


<link rel="stylesheet' 
<link rel="stylesheet' 


' href="./semantic-dist/semantic.css" /> 
' href="style.css" /> 


<Script src="vendor/babel-standalone.js">»></script> 
<script src="vendor/react.js"></script> 

<script src="vendor/react-dom.js"></script> 
“<script src="vendor/uuid.js">»></script> 

<script src="vendor/fetch.js"></script> 


</head> 


<body> 


<div id="main" class=" 


main ui"> 


<h1i class="ui dividing centered header">Timers</h1> 
<div id="content"></div> 


</div> 


<script type="text/babel" src="./js/client.js"></script> 
<ScTript type="text/babel" src="./js/helpers.js">»</script> 


<script 
type="text/babel" 


data-plugins="transform-class-properties" 


src="./js/app.js" 
></script> 


《<1-- 在 开始 前 删除 下 面 的 script 标签 --》 


<script 
type="text/babel" 


data-plugins="transform-class-properties" 
src="./js/app-complete.js" 





></script> 
</body> 


</html> 




















总 的 来 说 ， 这 个 文件 与 我 们 在 投票 应 用 程序 中 使 用 的 文件 非常 相似 。 我 们 在 head 标签 中 加 载 依 














其 项 (资源 )。 在 body 内 部 有 一 


些 元 素 ， 而 以 下 div 是 我 们 最 终 挂 载 React 应 用 程序 的 地 方 : 


time_tracking_app/public/index.html 





<div id="content"></div> 





46 第 2 章 组件 








下 面 的 script 标签 是 我 们 引导 浏览 器 把 app. js 加 载 到 页 面 的 地 方 : 
time_tracking_app/public/index.html 

















《<script 
type="text/babel" 
data-plugins="transform-class-properties" 
src="./js/app.js" 

></script> 














本 章 再 次 使 用 Babel 的 transform-class-properties 插件 。 上 一 章 的 末尾 讨论 了 这 个 插件 。 
按照 注释 说 明 删 除 加 载 app-complete. js 的 script 标签 : 


<script 
type="text/babel" 
data-plugins="transform-class-properties" 
src="./js/app.js" 

></script> 

<!-- 在 开始 前 删除 下 面 的 script 标签 --》 

<Seript 
type="text/babel. 
data-plugins="transform-elass—preoperties" 
Ste=""/js/app-eemplete-js” 

/seript> 


保存 index.html 。 如 果 你 现在 重新 加 载 页 面 ， 会 看 到 应 用 程序 已 经 消失 。 
2.3 第 (1) 步 : 将 应 用 程序 分 解 为 组 件 


正如 我 们 在 上 一 个 项 目 中 所 做 的 那样 ， 开 始 前 应 该 将 应 用 程序 分 解 为 组 件 。 同 样 ， 
常 紧密 映射 到 它们 各 自 的 React 组件。 让 我 们 来 看 看 应 用 程序 的 界面 ， 见 图 2-2。 
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图 2-2 ”应 用 程序 的 界面 


可 视 化 组 件 通 
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上 一 个 项 目 中 有 ProductList 和 Product 组 件 , 前 者 包含 后 者 的 实例 。 这里, 我们 发 现 了 与 此 相 
同 的 模式 ， 这 次 是 TimerList 和 Timer 组 件 ， 见 图 2-3。 

但 有 一 个 较 小 的 区 别 : 在 计时 器 列表 底部 有 一 个 小 的 “+” 图 标 。 如 我 们 所 见 ， 使 用 此 按钮 可 以 
将 新 的 计时 器 添加 到 列表 中 。 因 此 ，TimerList 事实 上 不 仅仅 是 计时 器 列表 组 件 ， 而 且 还 包含 了 一 个 
用 于 创建 新 计时 器 的 小 部 件 。 

可 以 将 组 件 视 为 函数 或 对 象 ， 并 应 用 单一 职责 原则 。 理 想 情 况 下 ， 组 件 应 该 只 负责 一 项 功能 。 
此 正确 的 做 法 是 将 TimerList 组 件 的 职责 范围 缩小 为 仅 展 示 计 时 器 列表 ， 然 后 将 它 藤 套 在 父 组 件 下 。 
我 们 将 父 组 件 称 为 TimersDashboard。TimersDashboard 组 件 把 TimerList 组 件 和 “+” 创 建 表 单 小 
部 件 作 为 子 级 ， 见 图 2-4。 
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图 2-3 TimerList 组 件 包 含 Timer 组 件 的 实例 图 2-4 TimersDashboard 组 件 把 TimerList 组 件 
和 “+” 创 建 表单 小 部 件 作 为 子 级 
内 责 分 离 不 仅 使 组 件 变 得 简单 ,而 且 通 常 还 可 以 提高 它 的 复 用 性 。 将 来 我 们 可 以 将 TimerList 组 
件 放 在 应 用 程序 中 的 任何 位 置 ， 假 如 这 些 位置 只 显示 一 个 计时 器 列表 。 此 组 件 不 再 承担 创建 计时 需 的 
职责 ， 我 们 可 能 只 和 希望 这 个 面板 视图 具有 该 行为 。 

















@ 如 何 命名 组 件 确实 取决 于 你 ， 但 是 要 有 一 些 一 致 的 规则 ， 就 像 我 们 围绕 着 语言 所 做 
的 那样 ， 这 将 大 大 提高 代码 的 清晰 度 。 
在 这 种 情况 下 ， 开 发 人 员 可 以 快速 推断 出 以 List 结尾 的 任何 组 件 只 泻 染 一 个 子 级 
列表 ， 仅 此 而 已 。 


“+” 创 建 表单 小 部 件 很 有 趣 ， 因 为 它 有 两 个 不 同 的 表示 。 当 点 击 “+” 按 钮 时 ， 小 部 件 将 转换 为 
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表单 。 表 单 关闭 后 ， 小 部 件 又 会 转换 回 “+” 按 钮 。 








我 们 可 以 采取 两 种 方法 。 一 种 方法 是 让 TimersDashboard 父 组 件 根 据 一 些 有 状态 的 数据 决定 渔 染 
组 件 还 是 表单 组 件 。 这 样 可 以 在 两 个 子 组 件 之 间 切 换 ， 但 会 增加 TimersDashboard 组 件 的 职责 。 





我 们 


种 方法 是 创建 一 个 新 的 拥有 单一 职责 的 组 件 ， 它 负责 决定 显示 “+” 按 钮 还 是 创建 计时 器 表单 。 
称 之 为 ToggleableTimerForm 组 件 。 作 为 子 组 件 ， 它 可 以 泻 染 TimerForm 组 件 或 “+” 按 钮 的 


HTML 标记 代码 。 


这 时 候 已 划分 出 四 个 组 件 ， 见 图 2-5。 
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ToggleableTimerForm 
图 2-5 划分 的 四 个 组 件 
现在 我 们 有 了 敏锐 的 眼光 来 识别 超 负荷 的 组 件 ， 另 一 个 候选 组 件 应 该 引起 我 们 的 注意 ， 见 图 2-6。 








Mow the lawn a 
House Cho Mow the lawn 
01:30:56 
闸 区 Project 
二 | House Chores 





| Update | Cancel 


2-6 单个 计时 器 : 显示 时 间 ( 左 ) 与 编辑 表单 ( 右 ) 
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计时 器 本 身 具 有 相当 多 的 功能 。 它 可 以 转换 为 编辑 表单 ， 能 删除 自身 ， 还 可 以 自行 启动 和 停止 。 
需要 将 它 拆 分 出 来 吗 ? 如 果 需 要 ， 该 怎么 做 ? 

显示 计时 器 和 编辑 计时 器 是 两 个 不 同 的 UI 元 素 。 它 们 应 该 是 两 个 不 同 的 React 组 件 。 像 
ToggleableTimerForm 组 件 一 样 ,， 我 们 需要 一 个 容器 组 件 , 并 根据 是 否 正在 编辑 计时 带 的 状态 来 决定 
是 泻 染 计 时 器 的 外 观 还 是 编辑 表单 。 

我 们 称 这 个 容器 组 件 为 EditableTimer。EditableTimer 组 件 的 子 组 件 会 是 Timer 组 件 或 编辑 表 
单 组 件 。 创建 和 编辑 计时 器 的 表单 非常 相似 ,因此 假定 在 两 个 上 下 文中 可 以 使 用 同一 个 TimerForm 组 
件 ， 见 图 2-7。 

至 于 计时 器 的 其 他 功能 ， 比 如 启动 和 停止 按钮 ， 现 在 还 很 难 确定 它们 是 否 应 该 拥有 自己 的 组 件 。 
不 过 可 以 相信 ， 在 我 们 编写 了 一 些 代码 后 ， 答 案 会 更 加 明显 。 

回顾 一 下 组 件 树 , 可 以 看 到 TimerList 的 组 件 名 称 是 不 恰当 的 。 它 实际 上 是 一 个 EditableTimerList 
组 件 ， 但 其 他 的 看 起 来 不 错 。 


因此 ， 我 们 有 了 最 终 的 组 件 层 次 结构 ， 但 对 于 计时 器 组 件 的 最 终 状 态 还 有 些 模糊 ， 见 图 2-8。 
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图 2-7 两 个 上 下 文中 可 以 使 用 同一 个 图 2-8 ”最 终 的 组 件 层次 结构 
TimerForm 组 件 


+ 
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@ TimersDashboard: 父 容 絮 
一 EditableTimerList: 显示 计时 器 的 容器 列表 
* EditableTimer : 显示 计时 器 或 它 的 编辑 表单 
" Timer : 显示 给 定 的 计时 髓 
“TimerForm: 显示 给 定 计时 器 的 编辑 表单 
一 ToggleableTimerForm: 显示 用 于 创建 新 计时 器 的 表单 
*TimerForm (还 没有 显示 过 ): 显示 新 计时 器 的 创建 表单 
用 层次 树 表示 见 图 2-9。 









































Timers-- 
[Blsjelelel=h ee 


Editable- Toggleable- 
TimerList TimerForm 





Timer TimerForm 


图 2-9 层次 树 


在 之 前 的 应 用 程序 中 ，ProductList 组 件 不 仅 需 要 泻 染 组 件 ， 还 负责 处 理 向 上 投票 
事件 并 和 数据 仓库 进行 交互 。 虽 然 这 样 做 应 用 程序 也 能 工作 ， 但 可 以 想象 随 着 代码 
库 的 扩展 ， 总 有 一 天 我 们 会 想 要 释放 ProductList 组 件 的 职责 。 

例如 ， 假 设 在 ProductList 组 件 中 添加 了 “ 按 票 数 排序 ”功能 。 如 果 和 希望 某 些 页 面 
可 以 排序 ( 类 别 页 面 )， 但 其 他 页 面 是 静态 的 ( 只 显示 前 10 名 )， 该 怎么 办 ? 我们 希 
望 将 排序 职责 “提升 ”到 父 组 件 ， 并 使 ProductList 组 件 成 为 列表 的 直接 泻 染 器 。 
这 个 新 的 父 组 件 需要 包括 排序 组 件 ,并 且 将 排序 后 的 产品 传递 给 ProductList 组 件 。 


2.4 ”从头 开 始 构建 React 应 用 程序 的 步骤 
现在 我 们 已 很 好 地 理解 了 组 件 的 组 成 ， 并 已 准备 好 构建 应 用 程序 的 静态 版 本 。 顶 层 组 件 最 终 将 与 


服务 融通 信 。 服 务 器 将 是 初始 状态 的 数据 来 源 ，React 会 根据 服务 顺 提 供 的 数据 进行 泻 染 。 应 用 程序 
也 会 向 服务 器 发 送 更 新 数据 ， 例 如 启动 计时 器 时 ， 见 图 2-10。 
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[Blealelel= ge 





Editable-— Toggleable-— 
TimerList TimerForm 


图 2-10 ”计时 器 应 用 程序 的 数据 交互 
但 就 像 在 上 一 章 中 所 做 的 那样 ， 如 果 我 们 从 构建 静态 组 件 开 始 将 简化 一 些 工作 。React 组 件 只 会 











演 染 HTML。 点 击 按钮 不 会 产生 任何 行为 ， 因 为 我 们 没有 连接 任何 交互 。 这 将 使 我 们 能 够 为 应 用 程序 
英 定 框架 ,并 清楚 地 了 解 组件 树 的 组 织 方式 。 


/ 


到 父 


的 ， 





接 下 来 可 以 确定 应 用 程序 的 state 以 及 它 应 该 在 哪个 组 件 中 。 首先 将 state 硬 编码 到 组 件 中 ,而 


不 是 从 服务 咒 加 载 。 














在 那 时 我 们 将 拥有 从 父 组 件 到 子 组 件 的 数据 流 。 然 后 可 以 添加 反 向 数据 流 , 将 事件 从 子 组 件 传递 
组 件 。 最 后 修改 顶层 组 件 使 它 能 与 服务 器 通信 。 

事实 上 ， 这 是 一 个 从 零 开 始 开发 React 应 用 程序 的 实用 框架 : 

(1) 将 应 用 程序 分 解 为 组 件 ; 

(2) 构建 应 用 程序 的 静态 版 本 ; 

(3) 确定 哪些 组 件 应 该 是 有 状态 的 ; 

(4) 确定 每 个 state 应 该 位 于 哪个 组 件 中 ; 

(5) 通过 便 编码 来 初始 化 state; 

(6) 添加 反 向 数据 流 ; 

(7) 添加 服务 器 通信 。 

在 上 一 个 项 目 中 我 们 遵循 了 这 个 模式 。 

(1) 将 应 用 程序 分 解 为 组 件 

我 们 查看 了 所 需 的 UI， 并 确定 了 需要 ProductList 和 Product 组 件 。 

(2) 构建 应 用 程序 的 静态 版 本 

组 件 开 始 时 没有 使 用 state ,不 过 我 们 让 ProductList 组 件 将 静态 的 props 传递 给 Product 组 件 。 
(3) 确定 哪些 组 件 应 该 是 有 状态 的 

为 了 使 应 用 程序 具有 交互 性 , 我们 必须 能 够 修改 每 个 产品 的 votes 属性 。 每 个 产品 都 必须 是 可 变 
此 它们 是 有 状态 的 。 
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(4) 确定 每 个 state 应 该 位 于 哪个 组 件 中 
ProductList 组 件 使 用 React 组 件 类 方法 来 管理 投票 的 state。 
(5) 通过 硬 编码 来 初始 化 state 


我 们 使 用 this .state 来 重 写 ProductList 组 件 时 ,会 从 Seed.products 数组 中 获取 数据 并 为 
this.state 赋值 。 


(6) 添加 反 向 数据 流 
我 们 在 ProductList 组 件 中 定义 了 handleUpVote( ) 限 数 ， 并 通过 props 传递 下 去 ， 以 便 每 个 
Product 组 件 都 可 以 向 ProductList 组 件 通 知 向 上 投票 事件 。 


(7) 添加 通信 服务 器 

我 们 没有 将 服务 器 组 件 添加 到 上 一 个 应 用 程序 中 ， 但 会 在 这 次 添加 ， 具 体内 容 在 第 3 章 讲解 。 
如 果 此 过 程 中 的 步骤 你 现在 还 没有 完全 清楚 ， 请 不 要 担心 。 本 章 的 目的 就 是 让 你 熟悉 此 过 程 。 
我 们 已 介绍 了 步 又 (1) 并 对 所 有 组 件 有 了 很 好 的 理解 , 除了 在 Timer 组 件 上 的 一 些 不 确定 性 。 步 又 
(2) 是 构建 应 用 程序 的 静态 版 本 。 与 上 一 个 项 目 一 样 ， 这 相当 于 定义 React 组 件 、 它 们 的 层次 结构 及 
HTML 表示 。 现 在 完全 避 开 了 使 用 state。 


2.5 第 (2) 步 : 构建 应 用 程序 的 静态 版 本 


2.5.1 TimersDashboard 组 件 


让 我 们 从 TimersDashboard 组 件 开 始 。 同 样 , 本 章 所 有 React 代码 都 将 在 public/app.js 文件 中 。 
首先 定义 render( ) 方 法 : 
time tracking app/public/js/app-1.js 





























































































































class TimersDashboard extends React.Component { 
render() { 
return ( 
<div className='ui three column centered grid'> 
《<div className='column'> 
<EditableTimerList /> 
<ToggleableTimerForm 
isOpen={true} 
/> 
</div> 
</div> 
】 
} 


此 组 件 负 责 演 染 般 套 在 div 标签 下 的 两 个 子 组 件 。TimersDashboard 组 件 传递 isopen 属性 给 
ToggleableTimerForm 组 件 。 子 组 件 用 它 来 决定 是 泻 染 “+” 或 TimerForm 组 件 。 当 ToggleableTimerForm 
组 件 为 “打开 ”状态 时 ， 则 表示 正在 显示 表单 。 
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各 和 上 一 章 一 样 ， 不 用 担心 div 标签 上 的 className 属性 。 它 最 终 会 定义 为 HTML 
中 的 div 元素 上 的 类 ， 纯 粹 用 于 样式 显示 。 


这 个 例子 中 像 ui three column centered grid 这 些 类 都 来 自 Semantic UI CSS 框 
Do 


架 。 该 框架 已 包含 在 index.html 的 头 部 。 
接 下 来 将 定义 EditableTimerList 组 件 。 它 将 演 染 两 个 EditableTimer 组 件 
泻 染 计时 器 的 外 观 ， 另 一 个 则 会 泻 染 计时 需 的 编辑 表单 ; 


， 一 


其 中 一 个 最 终 会 

















time_tracking_ app/public/js/app-1.js 





class EditableTimerList extends React .Component { 
Trender() { 


return ( 
<div id='timers'> 
<EditableTimer 


title='Learn React 
project='Web Domination' 
elapsed='8986300 
runningSince={null} 
editFormOpen={false} 

多 

<EditableTimer 
title='Learn extreme ironing'"' 
project="'World Domination’ 
elapsed= '3890985 
runningSince={null} 
editFormOpen={true} 

/> 

</div> 
2 
} 
} 





我 们 将 五 个 props 传递 给 每 个 子 组件 。 这 两 个 EditableTimer 组 件 的 主要 区 别 是 editFormOpen 
属性 设置 的 值 。 我 们 使 用 布尔 值 来 指示 EditableTimer 组 件 该 演 染 哪个 子 组 件 。 











@ runningSince 属性 的 用 途 稍 后 将 在 应 用 程序 的 开发 中 介绍 。 


2.5.2 EditableTimer 组 件 


EditableTimer 组 件 基 于 editFormOpen 届 


time_tracking_app/public/js/app-1.js 





eal 


ms 








FE 的 值 来 决定 返回 TimerForm 组 件 还 是 Timer 组 件 : 





class EditableTimer extends React.Component { 
render() { 
if (this.props.editFormOpen) { 
return ( 

<TimerForm 
title={this.props.title} 
project={this .props.project} 

/3 
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和 
} else { 
return ( 
<Timer 

title={this.props.title} 
project={this .props.project} 
elapsed={this .props .elapsed} 
runningSince={this.props.runningSince} 


/> 











注意 , title 和 project 都 作为 props 传递 给 TimerForm 组 件 。 这 使 得 组 件 能 够 用 计时 器 的 当前 
值 来 填充 这 些 字段 。 
2.5.3 ”TimerForm 组 件 


我 们 将 构建 一 个 包含 两 个 输入 字段 的 HTML 表单。 第 一 个 输入 字段 是 title， 第 二 个 输入 字段 是 
project ， 底 部 还 有 一 对 按钮 : 
time_tracking_ app/public/js/app-1.js 














class TimerForm extends React .Component { 
render() { 
const submitText = this.props.title ? 'Update' : "Create ' 
return ( 
<div className='ui centered card'> 
<div className='content'> 
<div className='ui form'> 
<div className='field'> 


<label>Title</label> 
<input type='text' defaultValue={this.props.title} /> 
</div> 


<div className='field'> 
<label>Project</1label> 
<input type='text' defaultValue={this.props.project} /> 
</div> 
<div className= 'ui two bottom attached buttons'> 
<button className='ui basic blue button ' > 
{submitText} 
</buttony> 
<button className= 'ui basic red button ' > 
Cancel 
</button> 
</div> 
</div> 
</div> 
</div> 
3 
} 





} 





邮 
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产 
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O 
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邓 





请 看 input 标签 。 我 们 指定 了 它们 的 类 型 是 text ， 然 后 使 用 了 React 的 defaultValue 
表单 用 于 编辑 时 ， 我 们 将 根据 需要 把 字段 设置 为 计时 器 的 当前 值 。 



































稍 后 我 们 将 在 ToggleableTimerForm 组 件 中 再 次 使 用 TimerForm 组 件 来 创建 计时 
@ 器 。ToggleableTimerForm 组 件 不 会 给 TimerForm 组 件 传递 任何 props。 因 此 


育 


this.props.title 和 this.props.project 的 值 都 将 返回 undefined, 并 且 输 入 字 
段 的 值 也 将 为 空 。 

我 们 在 render() 方 法 开头 和 return 语句 之 间 定 义 了 submitText 变量 。 该 变量 通过 判断 
this.props.title 是 否 存在 来 确定 表单 底部 的 提交 按钮 应 显示 的 文本 。 如 果 title 存在 ， 可 以 知道 
我 们 正在 编辑 现 有 的 计时 器 ， 因 此 它 显示 “Update”( 更 新 )， 否则 ， 显 示 “Create”( 创建 )。 

有 了 所 有 这 些 逻 辑 ，TimerForm 组 件 已 准备 好 泻 染 用 于 创建 新 的 计时 器 或 者 是 编辑 现 有 计时 器 的 
表单 了 。 

@ 我 们 使 用 带 有 三 元 运算 符 的 表达 式 来 设置 submitText 的 值 。 语 法 如 下 : 










































































condition ? expression1 : expression2 


如 果 condition 为 true, 则 运算 符 返回 expression1 的 值 ;否则 ,返回 expression2 
的 值 。 在 我 们 的 示例 中 ， 变 量 submitText 被 设置 为 返回 的 表达 式 。 


2.5.4 ToggleableTimerForm 组 件 


让 我 们 把 注意 力 转向 ToggleableTimerForm 组 件 。 回 顾 一 下 , 它 是 TimerForm 组 件 的 包装 组 件 。 
它 可 以 显示 “+” 按 钮 或 TimerForm 组 件 。 现 在 它 接收 来 自 父 组 件 的 单个 属性 isopen ， 并 用 来 指示 其 
行为 : 

time_tracking app/public/js/app-1.js 





























class ToggleableTimerForm extends React .Component { 
render() { 
if (this.props.isOpen) { 
return ( 
<TimerForm /> 
多 
} else { 
return ( 
<div className='ui basic content center aligned segment'> 
<button className='ui basic button icon'> 
<i className='plus icon' /> 
</button> 
</div> 
); 
} 
} 
} 


如 前 所 述 , TimerForm 组 件 不 会 从 ToggleableTimerForm 组 件 接收 任何 props。 因 此 , 它 的 title 








56 第 2 章 组 件 








和 project 字段 将 被 泻 染 为 空 。 
else 代码 块 下 的 return 语句 是 用 于 演 染 “+” 按 钮 的 标记 代码 ,可 以 认为 这 应 该 是 它 自己 的 React 
组 件 (比如 PlusButton ), 但 目前 先 把 代码 放 在 ToggleableTimerForm 组 件 中 。 


2.5.5 Timer 组 件 


下 面 介绍 Timer 组 件 。 同 样 ， 不 必 担 心 所 有 的 div 和 span 元 素 以 及 className 属性 。 我 们 提供 
了 以 下 代码 用 于 样式 演 染 : 
time_tracking app/public/js/app-l1.js 



































class Timer extends React.Component { 
render() { 
const elapsedString = helpers.renderElapsedString(this.props.elapsed); 
return ( 
<div className='ui centered card'> 
<div className='content'> 
<dqiv className='header'> 
{this.props.title} 
</div> 
<div className='meta'> 
{this.props.project} 
</div> 
<dqiv className='center aligned description'> 
<h2> 
{elapsedString} 
</h2> 
</div> 
<dqiv className='extra content'> 
<Span className='right floated edit icon'> 
<i className='edit icon' /> 
</span> 
<span className='right floated trash icon'> 
<i className='trash icon' /> 
</spany> 
</div> 
</div> 
<div className='ui bottom attached blue basic button'> 
Start 
</div> 
</div> 
3 
} 
} 


此 应 用 程序 中 elapsed 是 以 毫秒 为 单位 的 。 这 是 React 会 保留 的 数据 的 表示 形式 ， 也 是 一 个 很 好 
的 机 占 表 示 ， 但 我 们 希望 给 普通 用 户 展示 更 易 读 的 格式 。 

我 们 使 用 了 helpers .js 中 定义 的 renderElapsedString() 函 数 。 如 果 你 对 它 的 实现 方式 感到 好 
奇 ， 可 以 打开 该 文件 查看 。 该 字符 串 演 染 的 格式 为 “HH:MM:SS”。 
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© 请 注意 ,虽然 我 们 可 以 以 秒 而 不 是 毫秒 为 单位 存储 elapsed, 但 JavaScript 的 时 间 功 
能 是 以 毫秒 为 单位 的 。 为 简单 起 见 ， 我 们 将 elapsed 与 此 保持 一 致 。 作 为 奖励 ， 
计时 器 也 会 稍微 准确 一 些 ， 即 使 它们 在 显示 给 用 户 时 会 四 会 五 入 成 秒 。 加 


2.5.6 ”应 用 程序 泻 染 


在 定义 了 所 有 组 件 之 后 ,最 后 一 步 是 确保 我 们 调用 了 ReactDOM#render( ) 方 法 ,接着 就 可 以 查看 
静态 应 用 程序 了 。 把 该 方法 放 在 文件 的 底部 : 


time_tracking_app/public/js/app-1.js 














ReactDOM.render( 

<TimersDashboard />， 

document .getElementById('content ' ) 
2 





同样 ， 我 们 使 用 ReactDOM#render() 方 法 指定 需要 泻 染 的 React 组 件 以 及 在 HTML 
©@ 文档 (index.html ) 中 的 泻 染 位 置 。 


在 这 个 案例 中 ， 我 们 在 id 为 content 的 div 中 泻 染 TimersDashboard 组 件 。 
2.5.7 ” 试 试看 
保存 app.js 并 启动 服务 器 (npm start )。 在 浏览 器 中 打开 地 址 1ocalhost :3000， 见 图 2-11。 


©O@ [projectTwo:Timers x Re: 


CD localhost:3000 





Timers 


Learn React 
02:29:46 
和 
Start 


Title 
Learn extreme ironing 


Project 


World Domiration 
| Update Cancel 


Title 





Project 


| Create Cancel 











图 2-11 打开 地 址 1ocalhost :3000 


58 第 2 章 组 件 




















调整 一 些 props 并 刷新 ， 然 后 查看 结果 。 例 如 : 


@ 将 传递 给 ToggleableTimerForm 组 从 


被 泻 染 出 来 ; 


e@ 在 editFormOpen 属 怕 

















让 我 们 回顾 一 下 在 页 面 上 显示 的 所 有 组 件 。 





F 的 属性 从 true 翻转 为 false ， 然 后 就 能 看 到 “+” 按 钮 


E 上 翻转 参数 值 ， 然 后 见证 EditableTimer 组 件 会 泻 染 相应 的 子 组 件 。 


TimersDashboard 组 件 的 内 部 是 两 个 子 组 件 : EditableTimerList 组 件 和 ToggleableTimerForm 


组 件 。 


EditableTimerList 组 件 包 含 两 个 EditableTimer 组 从 
件 ， 第 二 个 组 件 是 TimerForm 组 件 。 这 些 底 层 组 件 (也 称 为 叶子 组 件 ) 占据 了 页 面 
这 是 普遍 的 情况 。 叶 子 组 件 上 方 的 组 件 主要 与 流程 探 人 














ToggleableTimerForm 组 件 泻 染 TimerForm 组 件 。 要 注 


同 的 语义 ， 第 一 个 是 更 新 ， 第 二 个 是 创建。 


2.6 第 (3) 步 : 确定 哪些 组 件 应 该 是 














为 了 使 应 用 程序 具有 交互 性 ,我 们 必须 将 它 从 静态 的 发 











变 的 。 让 我 们 首先 收集 静态 应 用 程序 中 每 个 组 件 使 用 的 数据 。 
义 或 使 用 props 的 任何 地 方 。 然 后 我 们 将 胡 



































TimersDashboard 组 件 

















在 静态 应 用 程序 中 ， 它 声明 了 两 个 子 组 件 并 设置 了 一 个 isopen 属性 ， 即 传递 给 














TimerForm 组 件 的 布尔 值 。 
EditableTimerList 组 件 
声明 了 两 个 子 组 件 ， 每 个 都 具有 与 给 定 计时 器 属性 相对 应 的 props。 
EditableTimer 组 件 
它 使 用 了 editFormopen 属性 。 














Timer 组 件 














后 有 关 。 
意 页 面 上 的 两 个 表单 如 何 为 其 按钮 设置 不 























状态 的 








展 为 可 变 的 。 第 一 步 是 明 丰 












































它 使 用 了 计时 需 的 所 有 props。 


TimerForm 组 件 




















它 具 有 两 个 交互 式 输入 字段 ， 一 个 是 title， 男 一 个 是 




















2.6.1 state 准 由 


可 以 应 用 准则 来 确 


由 


人 


用 计时 器 的 当前 值 初始 化 这 些 字段。 











定数 据 是 否 应 该 具有 状态 : 

















project。 当 编辑 现 有 计时 器 时 ， 











什么 





EF, 第 一 个 组 件 有 一 个 Timer 组 件 作 为 子 组 
的 大 部 分 HTML。 








应 该 是 可 


在 静态 应 用 程序 中 ,数据 存在 于 我 们 定 
定 哪些 数据 应 该 是 有 状态 的 。 


Toggleable- 
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个 以 下 问题 来 自 Facebook 的 优秀 文章 “Thinking In React”。 你 也 可 以 阅读 原文 。 


(1) 它 是 通过 props 从 父 组 件 那 里 传递 进来 的 吗 ? 如 果 是 的 话 ， 那 它 很 可 能 不 是 state。 

子 组 件 使 用 的 许多 数据 已 列 在 其 父 组 件 中 。 这 个 准则 有 助 于 减少 重复 。 

例如 ,“ 计 时 器 属性 ”已 被 多 次 列 出 。 当 我 们 看 到 EditableTimerList 组 件 声明 的 属性 时 ， 可 以 
将 其 视 为 state。 但 是 当 我 们 在 其 他 地 方 看 到 时 ， 它 就 不 是 state 了 。 

(2) 它 会 随 着 时 间 而 改变 吗 ? 如 果 不 是 的 话 ， 那 它 很 可 能 不 是 state。 

这 是 有 状态 的 数据 的 关键 准则 : 它 会 发 生变 化 。 

(3) 可 以 根据 组 件 中 的 其 他 state 或 props 来 计算 它 吗 ? 如 果 是 的 话 ， 那 它 就 不 是 state。 

为 简单 起 见 ， 我 们 希望 用 尽 可 能 少 的 数据 点 来 表示 state。 


2.6.2 ”应 用 准则 

TimersDashboard 组 件 

@ ToggleableTimerForm 组 件 中 的 isopen 布尔 值 

有 状态 的 。 数 据 在 这 里 定义 。 它 会 随 着 时 间 而 改变 ， 且 不 能 从 其 他 state 或 props 计算 得 到 。 

EditableTimerList 组 件 

e 计时 带 属 性 

有 状态 的 。 数据 在 此 组 件 中 定义 。 它 会 随 着 时 间 而 改变 , 且 不 能 从 其 他 state 或 props 计算 得 到 。 

EditableTimer 组 件 

@ 给 定 计时 器 的 editFormopen 属性 

有 状态 的 。 数 据 在 此 组 件 中 定义 。 它 会 随 着 时 间 改 变 ， 且 不 能 从 其 他 state 或 props 计算 得 到 。 

Timer 组 件 

e@ 计时 带 属 性 

在 这 个 上 下 文中 ， 它 不 是 有 状态 的 。 属 性 是 从 父 组 件 传递 而 来 。 

TimerForm 组 件 

我 们 可 能 会 得 出 这 样 的 结论 ,TimerForm 组 件 没有 管理 任何 有 状态 的 数据 ,因为 title 和 project 
是 从 父 组 件 传 递 下 来 的 props。 不 过 ， 我 们 将 看 到 表单 本 身 就 是 特殊 的 状态 管理 器 。 

因此 除了 TimerForm 组 件 外 ， 我 们 已 确定 了 这 些 数 据 是 有 状态 的 : 

@ 计时 需 列 表 和 每 个 计时 器 的 属性 ; 

@ 是 否 打开 计时 器 的 编辑 表单 ; 

@ 是 否 打开 创建 表单 。 











































































































60 第 2 章 组 件 





2.7 第 (4) 步 : 确定 每 个 state 应 该 位 于 哪个 组 件 中 







































































虽然 我 们 能 确定 这 些 有 状态 的 数据 存在 于 静态 应 用 程序 中 的 特定 组 件 里 , 但 这 并 不 表示 它 处 在 有 


状态 的 应 用 程序 中 的 最 佳 位 置 。 下 面 的 任务 是 确定 三 个 独立 的 state 中 每 个 state 的 最 佳 位 置 。 
这 会 是 一 个 挑战 ， 但 我 们 可 以 再 次 从 Facebook 的 指南 “Thinking in React” 中 学 习 并 应 用 以 下 步 




















又 来 帮助 我 们 完成 这 个 过 程 。 
对 于 每 一 个 state : 
标识 基于 该 state 演 染 的 每 个 组 件 ; 
































共同 所 有 者 组 件 或 其 他 层次 结构 中 较 高 层 的 组 件 应 该 拥有 该 state; 























查找 共同 所 有 者 组 件 ( 在 层次 结构 中 需要 该 state 的 所 有 组 件 上 方 的 单个 组 件 ); 





e 如 果 你 找 不 到 拥有 该 state 的 组 件 , 只 需 创 建 一 个 新 组 件 来 保存 state, 并 将 其 添加 到 共同 所 




















有 者 组 件 上 方 层次 结构 中 的 某 个 位 置 。 
让 我 们 将 此 方法 应 用 到 应 用 程序 中 。 


2.7.1 计时 器 列表 和 每 个 计时 器 的 属性 




















乍 一 看 ， 我 们 可 能 会 认为 TimersDashboard 组 件 似 乎 没有 使 用 这 个 state。 相 反 ， 使 用 它 的 第 一 个 组 
件 是 EqitableTimerList 组 件 。 这 与 静态 应 用 程序 中 声明 此 数据 的 位 置 相 匹配 。 由 于 ToggleableTimerForm 
组 件 似 乎 也 没有 使 用 这 个 state ， 因 此 我 们 可 能 推断 出 EditableTimerList 组 件 必须 是 共同 所 有 者 。 































































































虽然 这 可 能 符合 显示 、 修 改 和 删除 计时 器 的 情况 ,但 创建 呢 ? ToggleableTimerForm 组 件 不 需要 


根据 state 泻 染 ， 不 过 它 可 以 影响 state。 它 需要 具备 插入 一 个 新 计时 器 的 能 力 ， 并 将 新 计时 器 的 数 





据 向 上 传递 到 TimersDashboard 组 件 。 











EditableTimerList 组 件 。TimersDashboard 组 件 可 以 处 理 EdqitableTimerList 组 


因此 ，TimersDashboard 组 件 才 是 真正 的 共同 所 有 者 。 它 将 通过 传递 计时 器 的 state 来 演 染 


! 件 的 相关 修改 和 

















ToggleableTimerForm 组 件 创 建新 计时 融 的 操作 ， 并 能 够 改变 state。 新 的 state 将 通过 Editable- 





TimerList 组 件 向 下 传递 。 
2.7.2 是否 打 开 计 时 器 的 编辑 表单 











在 静态 应 用 程序 中 ,EditableTimerList 组 件 指 定 了 EditableTimer 组 件 是 否 应 该 泻 染 打开 的 编 
辑 表 单 。 从 技术 上 讲 , 这 个 state 应 该 只 存在 于 每 个 EditableTimer 组 件 中 。 这 是 因为 在 层次 结构 中 




















没有 父 组 件 依赖 于 此 数据 。 


将 state 存储 在 EditableTimer 组 件 中 可 以 满足 当前 的 需求 ， 但 将 来 可 能 会 需要 把 这 个 state 


“提升 ”到 组 件 层 次 结构 的 更 高 位 置 。 








例如 我 们 想 要 施加 一 个 限制 , 一 次 只 能 打开 一 个 编辑 表单 ,该 怎么 办 ? 因此 EqitableTimerList 组 件 
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有 该 state 是 有 意义 的 ， 因 为 它 需要 检查 并 决定 是 否 允 许 新 的 “编辑 表单 打开 ”事件 能 响应 成 功 。 如 果 
我 们 希望 只 允许 一 个 表单 打开 ， 包 括 创建 表单 ， 那 么 需要 将 该 state 提升 到 TimersDashboard 组 件 中 。 
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2.7.3 创建 表单 的 可 见 性 
TimersDashboard 组 件 似乎 不 关心 ToggleableTimerForm 组 件 是 打开 的 还 是 关闭 的 。 我 们 可 以 放 
心地 推 新 ，state 只 存在 于 ToggleableTimerForm 组 件 中 。 
总 之 ,我 们 拥有 三 种 state 分 别 位 于 三 个 不 同 的 组 件 中 
e@ TimersDashboard 组 件 拥 有 并 管理 计时 器 的 数据 ; 
@ 每 个 EditableTimer 组 件 管理 计时 器 编辑 表单 的 state; 
@ ToggleableTimerForm 组 件 管理 表单 可 见 性 的 state。 















































2.8 第 (5) 步 : 通过 硬 编码 来 初始 化 state 


现在 已 做 好 充分 准备 让 应 用 程序 变 得 有 状态 。 在 这 个 阶段 ， 我 们 还 不 会 与 服务 器 通信 。 相 反 , 我 
们 将 在 组 件 中 定义 初始 state。 这 意味 着 需要 对 顶层 组 件 TimersDashboard 中 的 计时 顺 列 表 进 行 硬 编 
码 。 对 于 其 他 两 种 state ， 我 们 将 默认 关闭 组 件 的 表单 。 


在 将 初始 state 添加 到 父 组 件 后 ,我们 需要 确保 在 其 子 组 件 中 正确 地 创建 props。 













































































2.8.1 为 TimersDashboard 组 件 添加 state 


首先 修改 TimersDashboard 组 件 并 将 计时 器 的 数据 直接 保存 在 组 件 内 : 
time tracking app/public/js/app-2.js 











class TimersDashboard extends React.Component { 
state = { 
timers: [ 


title: 'Practice squat', 
project: 'Gym Chores ' ， 
id: uuid.v4(), 
elapsed: 5456099 ， 
runningSince: Date.now(), 

{ 
title: 'Bake squash ' ， 
project: 'Kitchen Chores ' ， 
id: uuid.v4(), 
elapsed: 1273998, 
runningSince: null, 

}, 

] ， 
}; 


render() { 
return ( 
<div className='ui three column centered grid'> 
《<div className='column'> 
<EditableTimerList 
timers={this.state.timers} 
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/> 
<ToggleableTimerForm /> 
</div> 
</div> 
) 
】 
} 


我 们 依靠 Babel 的 transform-class-properties 插件 来 提供 属性 初始 化 器 的 语法 ,我 们 使 用 密 
钥 计 时 器 将 初始 state 设置 为 对 象 。timers 指向 一 个 包含 两 个 硬 编码 计时 器 对 象 的 数组 。 


























© 上 一 章 讨 论 了 属性 初始 化 器 的 相关 内 容 。 


在 下 面 的 render( ) 方 法 中 ， 我们 将 state .timers 传递 给 EditableTimerList 组 件 。 


对 于 id 属性 ， 使 用 名 为 uuig 的 库 。 我 们 在 index .html 中 加 载 这 个 库 ， 并 使 用 uuid.v4( ) 方 法 
为 每 个 子 项 随机 生成 一 个 通 重用 唯一 识别 码 ( Universally Unique Identifier，UUID )。 





























@ UUID 是 一 个 像 下 面 的 字符 串 : 


2030efbd-a32f-4fcc-8637-7c410896b3e3 


2.8.2 在 EditableTimerList 组 件 中 接收 props 
EditableTimerList 组 件 接收 计时 器 列表 作为 属性 , 属性 名 称 是 timers。 修改 该 组 件 以 使 用 这 些 


props: 








time_tracking_ app/public/js/app-2.js 





class EditableTimerList extends React .Component { 


render() { 
const timers = this.props.timers.map((timer) => ( 
<EditableTimer 


key={timer .id} 
id={timer.id} 
title={timer.title} 
project={timer.project} 
elapsed={timer .elapsed} 
runningSince={timer.runningSince} 
/> 
)); 
return ( 
<div id='timers'> 
{timers} 
</div> 
好 
} 
} 


希望 这 看 起 来 很 熟悉 。 我 们 使 用 map( ) 方 法 将 timers 数组 构建 为 EditableTimer 组 件 列 表 。 这 
正 是 上 一 章 我 们 在 ProductList 组 件 中 构建 Product 组 件 列 表 的 方式 。 
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我 们 也 把 id 传递 给 EditableTimer 组 件 ， 这 个 准备 很 有 必要 。 还 记得 Product 组 件 是 怎样 通过 
调用 一 个 函数 并 传人 它 的 id 来 与 ProductList 组 件 通信 吗 ? 可 以 肯定 的 是 ， 还 会 再 来 一 次 。 




















2.8.3 ”props 和 state 

随 着 你 对 React 的 state 范式 有 了 新 理解 ， 让 我 们 重新 思考 props。 

请 记 住 ，props 可 理解 为 不 可 改变 的 state。TimersDashboard 组 件 中 存在 的 可 变 的 state 将 作 
为 不 可 变 的 props 传递 给 EditableTimerList 组 件 。 

我 们 详细 讨论 了 作为 state 的 条 件 , 还 有 它 应 该 存在 的 位 置 。 幸 运 的 是 ,不 需要 对 props 进行 同 
样 匈 长 的 讨论 。 一 旦 你 理解 了 state， 就 能 明白 props 是 如 何 作 为 它 的 单 向 数据 管道 的 。state 在 一 
些 选 定 的 父 组 件 中 进行 管理 ， 然 后 该 数据 通过 props 向 下 流向 子 组 件 。 

如 果 state 更 新 了 ， 组 件 会 通过 调用 render( ) 方 法 来 管理 该 state 并 重新 泻 染 。 这 也 导致 了 它 
所 有 的 子 组 件 都 会 依次 重新 泻 染 ， 还 有 那些 子 组 件 的 子 级 ， 并 沿 着 链条 一 直 往 下 。 

让 我 们 继续 沿 着 这 条 链 走 下 去 吧 。 




































































2.8.4 为 EditableTimer 组 件 添加 state 

在 应 用 程序 的 静态 版 本 中 ，EqditableTimer 组 件 依赖 从 父 级 传递 下 来 的 editFormOpen 属性 。 我 
们 决定 让 这 个 state 存在 于 组 件 本 身 。 

我 们 将 editFormopen 的 初始 值 设置 为 false, 这 意味 着 表单 默认 是 关闭 的 。 我们 还 会 将 id 属性 
沿 着 链条 向 下 传递 : 

time_ tracking app/public/js/app-2.js 























class EditableTimer extends React.Component { 
state = { 
editFormOpen: false, 


}; 


render() { 
if (this.state.editFormOpen) { 
return ( 
<TimerForm 
id={this.props.id} 
title={this.props.title} 
project={this.props.project} 
/> 
); 
} else { 
return ( 
<Timer 
id={this.props.id} 
title={this.props.title} 
project={this.props.project} 
elapsed={this.props.elapsed} 
runningSince={this.props.runningSince} 


64 第 2 章 组 件 





2. 


7 
} 
} 
} 





8.5 Timer 组 件 保 持 无 状态 
如 果 你 看 下 Timer 组 件 ， 就 会 发 现 它 无 须 修改 。 它 一 直 使 用 自己 专 有 的 props ， 到 目前 为 止 还 没 












































有 受到 我 们 重 构 的 影响 。 


2. 





8.6 为 ToggleableTimerForm 组 件 添 加 state 








我 们 知道 需要 调整 ToggleableTimerForm 组 件 , 因为 已 经 给 它 分 配 了 一 些 有 状态 的 职责 。 我 们 希 














望 此 组 件 来 管理 isopen 状态 。 因 为 该 状态 与 此 组 件 是 隔离 的 , 所 以 下 面 为 应 用 程序 添加 第 一 个 交互 























证 我 们 从 初始 化 state 开始 ,希望 组 件 初始 化 为 关闭 状态 : 
time_tracking _ app/public/js/app-2.js 





class ToggleableTimerForm extends React.Component { 
state = { 


isOpen: false, 


}; 











接 下 来 定义 一 个 函数 来 使 表单 的 状态 切换 为 打开 : 
time_tracking _ app/public/js/app-2.js 





handleFormOpen = () => { 
this.setState({ isOpen: true }); 
}; 


render() { 














如 上 一 章 未 尾 所 述 ,我 们 需要 将 此 函数 编写 为 箭头 函数 ， 以 确保 函数 内 部 的 this 能 绑 定 到 组 件 。 

















React 会 自动 把 与 组 件 API 相对 应 的 类 方法 ( 如 render() 和 componentDidMount() 方 法 ) 绑 定 到 组 件 。 








复习 一 下 ， 如 果 没 有 属性 初始 化 器 特性 ， 我 们 只 能 像 这 样 编写 自 定义 组 件 方法 : 


handleFormOpen() { 
this.setState({ isOpen: true }); 
} 


下 一 步 是 在 构造 函数 内 将 此 方法 绑 定 到 组 件 ， 如 下 所 示 : 


constructor(props) { 
super(props); 


this.handleFormOpen = this.handleFormOpen.bind(this); 


这 是 一 种 非常 有 效 的 方法 , 且 不 使 用 ES7 之 外 的 任何 特性 , 但 我 们 会 在 此 项 目 中 使 用 属性 初始 
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这 里 还 可 以 添加 一 些 交 互 : 
time_tracking_app/public/js/app-2.js 





render() { 
if (this.state.isOpen) { 
return ( 
<TimerForm /> 
); 
} else { 
return ( 
<div className='ui basic content center aligned segment'> 
<button 
ClassName= 'ui basic button icon 
onClick={this.handleFormOpen} 
> 
<i className='plus icon' /> 
</button> 
</div> 
} 
} 


和 上 一 个 应 用 程序 中 的 向 上 投票 按钮 一 样 ,我 们 使 用 按钮 上 的 onclick 属性 来 调用 handleFormOpen() 
函数 。handleFormopen( ) 函数 能 修改 state ， 并 将 isOpen 设置 为 true。 这 会 导致 组 件 重 新 演 染 。 当 
render( ) 方 法 被 第 二 次 调用 时 ，this .state. isOpen 的 值 为 true，ToggleableTimerForm 组 件 演 染 
为 TimerForm 组 件 。 妙 ! 


2.8.7 ”为 TimerForm 组 件 添加 state 


前 面 提 到 TimerForm 组 件 会 管理 state， 因 为 它 包 含 了 一 个 表单 。 在 React 中 ,表单 是 有 状态 的 。 
回顾 一 下 ，TimerForm 组 件 包含 两 个 输入 字段 ， 见 图 2-12。 
































Title 


Mow the lawn 


Project 


House Chores 





Update [ Cancel 














图 2-12 TimerForm 组 件 包含 两 个 输入 字段 


这 些 输入 字段 对 用 户 来 说 是 可 修改 的 。 在 React 中 ， 对 组 件 进 行 的 所 有 修改 都 应 由 React 处 理 并 
保存 在 state 中 ,这 包括 修改 输入 字段 等 变化 ,通过 让 React 管理 所 有 修改 ,我 们 可 以 确保 用 户 在 DOM 
上 交互 的 可 视 化 组 件 与 后 台 React 组 件 的 状态 匹配 。 
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理解 这 一 点 的 最 好 方法 就 是 看 看 它 是 什么 样子 的 。 
要 使 这 些 输入 字段 有 状态 ， 首 先 需 要 在 组 件 顶 部 初始 化 state: 
time_tracking app/public/js/app-2.js 











class TimerForm extends React.Component { 























state = { 
title: this.props.title || '', 
project: this.props.project || '', 
}; 
state 对 象 有 两 个 属性 ， 每 个 属性 对 应 一 个 TimerForm 组 件 管理 的 输入 字段 。 我 们 将 这 些 属性 的 








初始 state 设置 为 props 传递 下 来 的 值 。 如 果 TimerForm 组 件 正在 创建 一 个 新 计时 器 而 非 编辑 现 有 的 
计时 需 ,， 那 么 这 些 props 的 值 将 是 undefined。 在 这 种 情况 下 ， 我 们 将 两 个 输入 字段 的 值 初始 化 为 空 
字符 串 〈(") 











我 们 希望 避免 将 title 或 project 字段 初始 化 为 undefined。 这 是 因为 从 技术 上 讲 ， 
输入 字段 的 值 永 远 不 可 能 是 undefined。 如 果 它 为 空 , 那么 它 在 JavaScript 中 的 值 是 
空 字 符 串 。 实 际 上 ， 如 果 将 输入 字段 的 值 初 始 化 为 undefined，React 就 会 报错 。 


defaultValue 属性 仅 在 初始 泻 染 时 设置 输入 字段 的 值 。 可 以 使 用 value 属性 将 输入 字段 直接 连 
接 到 组 件 的 state ， 而 不 用 defaultvalue 属性 。 我 们 可 以 这 样 做 : 
<div className='field'> 
<label>Title</label> 
<input 
type='text"' 
value={this.state.title} 
/> 
/div> 
通过 此 更 改 , 输入 字段 将 由 状态 来 驱动 。 每 当 状态 属性 title 或 project 发 生变 化 时 , 输入 字段 
就 会 更 新 至 新 值 。 
然而 ， 我 们 忽略 了 一 个 关键 因素 : 目前 没有 任何 方法 可 以 让 用 户 修改 这 个 state。 输 入 字段 将 与 
组 件 的 state 同步 启动 ， 但 当 用 户 进行 修改 时 ， 输 入 字段 将 与 组 件 的 state 不 同步 。 
可 以 在 input 元 素 上 使 用 React 的 onChange 属性 来 解决 这 个 问题 。 像 按钮 或 元 素 的 onClick 
性 一 样 ， 我 们 可 以 将 onchange 属性 设置 为 函数 。 每 当 输入 字段 改变 时 ，React 将 调用 指定 的 函数 。 
让 我 们 把 两 个 输入 字段 的 onChange 属性 设置 为 函数 ， 接 下 来 定义 该 限 数 : 
time_tracking app/public/js/app-2.js 





















































el 


























<div className=' field'> 
<label>Title</label> 
<input 
type='text" 
value={this.state.title} 
onChange={this.handleTitleChange} 
/> 


rdiwy 
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<dqiv className='field'> 
<label>Project</1label> 
<input 
type= ' 七 ext 
value={this.state.project} 
onChange={this.handleProjectChange} 
/> 
</div> 





handleTitleChange 和 handleProjectChange 函数 都 将 在 state 中 修改 它们 各 自 的 属性 : 











time_tracking_app/public/js/app-2.js 





handleTitleChange = (e) => { 
this.setState({ title: e.target.value }); 
}; 


handleProjectChange = (e) => { 
this.setState({ project: e.target.value }); 
}; 

















当 React 调用 传递 给 onChange 属性 的 函数 时 ， 它 会 使 用 事件 对 象 来 调用 该 函数 。 我 们 将 此 参数 
称 为 e。 该 事件 对 象 包含 target .value 字段 下 的 更 新 值 。 我 们 将 state 更 新 为 输入 字段 的 新 值 。 

在 React 中 组 合 使 用 state 、value 和 onChange 属性 是 编写 表单 元 素 的 规范 方法 。 第 6 章 将 深入 
探讨 表单 的 相关 知识 ，6.2.3 节 将 详细 探讨 此 主题 。 

回顾 一 下 ， 下 面 是 一 个 TimerForm 组 件 生命 周期 的 例子 : 

(1) 页 面 上 有 一 个 标题 为 “Mow the lawn” 的 计时 器 ; 

(2) 用 户 切换 并 打开 此 计时 器 的 编辑 表单 ， 这 样 TimerForm 组 件 就 挂 载 到 页 面 了 ; 

(3) TimerForm 组 件 将 title 状态 属性 初始 化 为 字符 串 "Mow the lawn"; 

(4) 用 户 将 输入 字段 的 值 修改 为 "Cut the grass"; 

(5) 每 次 按键 时 ，React 都 会 调用 handleTitleChange() 方 法 。title 的 内 部 状态 与 用 户 在 页 面 上 
看 到 的 内 容 保 持 同步 。 

通过 对 TimerForm 组 件 进行 重 构 , 我 们 已 完成 了 在 选 出 的 组 件 中 建立 有 状态 的 数据 。 向 下 数据 管 
道中 ，props 已 组 装 好 了 。 

我 们 已 准备 好 了 ， 也 许 有 点 急切 地 想 去 使 用 反 向 数据 流 建 立交 互 。 但 在 开始 之 前 ， 先 保存 并 重新 
加 载 应 用 程序 以 确保 一 切 正常 ,我们 希望 能 看 到 基于 TimersDashboard 组 件 中 的 硬 编码 数据 演 染 的 新 
计时 器 的 示例 ， 还 希望 点 击 “+” 按 钮 能 切换 并 打开 表单 ， 见 图 2-13。 
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Practice squat 
01:30:56 
Practice squat a 
01:30:56 
a | | Bake squash 
00:21:13 
Bake squash 让 区 
00:21:13 = 
自 区 | 








图 2-13 基于 TimerDashboard 组 件 中 的 硬 编码 数据 泻 染 的 新 计时 需 ， 
以 及 可 点 击 的 “+” 按 钮 





2.9 第 (6) 步 : 添加 反 向 数据 流 


如 上 一 章 所 述 ， 子 组 件 是 通过 父 组 件 传递 的 props 中 的 函数 与 父 组 件 通信 的 。 在 ProductHunt 应 
用 程序 中 ， 当 点 击 向 上 投票 按钮 时 ，Product 组 件 并 没有 进行 任何 数据 管理 的 操作 。 它 不 是 状态 的 所 
有 者 。 相 反 ，Product 组 件 调 用 了 ProductList 组 件 传递 给 它 的 函数 ， 并 传人 了 它 的 id 作为 参数 。 
因此 ProductList 组 件 就 能 管理 状态 了 。 

需要 在 两 个 地 方 使 用 反 向 数据 流 : 

@ TimerForm 组件 需 要 传递 create 和 update 事件 在 ToggleableTimerForm 组 件 下 传递 create 
事件 , 而 在 EditableTimer 组 件 下 传递 update 事件 )。 这 两 个 事件 最 终 都 会 传 到 TimersDashboard 
































出 | 








组 件 。 
e@ Timer 组 件 具 有 相当 多 的 行为 。 它 需要 处 理 delete 和 edit 的 点 击 事件 , 以 及 启动 和 停止 计时 
右 的 逻辑 。 





让 我 们 从 TimerForm 组 件 开始 吧 。 





2.9.1 TimerForm 组 件 

为 了 清楚 地 了 解 TimerForm 组 件 究竟 需要 什么 , 我 们 首先 向 它 添加 事件 处 理 程 序 , 然后 在 它 上 层 
的 组 件 中 去 做 这 个 事情 。 

TimerForm 组 件 需 要 两 个 事件 处 理 程序 : 

e@ 表单 提交 时 ( 创建 或 更 新 计时 器 ); 

e@ 点 击 “Cancel”( 取消 ) 按钮 时 (关闭 表单 )。 
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| 





TimerForm 组 件 将 接收 两 个 props 传递 的 函数 来 处 理 每 个 
责 提供 以 下 函数 。 





u 














@ props.onFormSubmit(): 在 表单 提交 时 调用 。 
@ props.onFormClose(): 点 击 “Cancel” 按 钮 时 调用 。 


我 们 很 快 就 会 明白 这 样 做 的 目的 : 这 使 得 父 组 件 能 够 在 这 些 事 伯 
先 修改 TimerForm 组 件 上 的 按钮 ， 并 为 每 个 按钮 指定 onClick 属 怕 
time_tracking_ app/public/js/app-3.js 


























有 件 。 使 用 TimerForm 组 伯 





F 的 父 组 件 负 


F 发 生 时 决定 应 该 采取 什么 行为 。 





<div className= 'ui two bottom attached buttons'> 
<button 
className='ui basic blue button 
onClick={this.handleSubmit} 
> 
{submitText} 
</button> 
<button 
className='ui basic red button 


onClick={this.props.onFormClose} 
> 


Cancel 
</button> 
</div> 





“Submit”( 提交 ) 按钮 的 onClick 属性 指定 了 this .handleSubmit 函数 ， 
“Cancel” 按 钮 的 onClick 属 怕 
































FE 直接 指定 了 props 传递 的 onFormClose 函数 。 
下 面 来 看 handleSubmit() 国 数 : 




















time_tracking_app/public/js/app-3.js 





该 函数 将 在 后 面 定义 。 














handleSubmit = () => { 
this.props.onFormSubmit({ 
id: this.props.id, 
title: this.state.title, 
project: this.state.project, 


}); 
}; 


render() { 

















handleSubmit( ) 函数 调用 了 一 个 尚未 定义 的 onFormSubmit( ) 函数 , 并 传人 了 一 个 





= 


和 project 属性 的 数据 对 象 。 对 于 创建 表 六 
在 继续 之 前 ， 让 我 们 对 TimerForm 组 件 做 最 后 一 次 调整 : 
time_tracking_app/public/js/app-3.js 









































有 id、title 





来 说 意味 着 id 的 值 是 undefined， 因 为 id 还 不 存在 。 





render() { 


const submitText = this.props.id ? 'Update' : 'Create'; 
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我 们 将 submitText 的 值 换 成 id 而 非 title。 这 是 因为 使 用 id 属性 来 确定 一 个 对 象 是 否 已 被 创 
建 是 一 种 更 常见 的 做 法 。 


























2.9.2 ToggleableTimerForm 组 件 


让 我 们 跟踪 TimerForm 组 件 中 的 提交 事件 ， 因 为 它 会 在 组 件 层 次 结构 中 向 上 冒 泡 。 首 先 要 修改 
ToggleableTimerForm 组 件 。 我 们 需要 它 将 两 个 属性 函数 传递 给 TimerFornm 组 件 , 分 别 是 onFormclose() 
和 onFormSubmit() : 









































time_tracking_ app/public/js/app-3.js 
// 在 ToggleableTimerForm 组 件 内 
handleFormOpen = () => { 

this .setState({ isOpen: true }); 
]s 





handleFormClose = () => { 
this.setState({ isOpen: false }); 
起 


handleFormSubmit = (timer) => { 
this.props.onFormSubmit(timer); 
this.setState({ isOpen: false }); 
和 


render() { 
if (this.state.isOpen) { 
return ( 
<TimerForm 
onFormSubmit={this.handleFormSubmit} 
onFormClose={this.handleFormClose} 
/> 
) ; 


} 1 { 





TT 


首先 看 一 下 render() 函数 ， 可 以 看 到 我 们 将 两 个 函数 作为 props 传递 下 去 。 函 数 就 像 其 他 属性 
一 样 。 

这 里 最 有 趣 的 是 handleFormSubmit( ) 孙 数 。 请 记 住 ，ToggleableTimerForm 组 件 并 不 是 计时 靛 
状态 的 管理 者 。TimerForm 组 件 发 出 事件 ， 在 这 个 例子 中 是 提交 新 计时 器 。ToggleableTimerForm 组 
件 只 是 此 消息 的 代理 。 因 此 在 表单 提交 时 ， 它 会 调用 自己 的 props .onFormSubmit() 属 性 函数 。 我 们 
最 终 会 在 TimersDashboard 组 件 中 定义 此 函数 。 

handleFormSubmit( ) 函数 接收 timer 参数 。 回 想 一 下 ,在 TimerForm 组 件 中 该 参数 是 包含 所 需 
计时 器 属性 的 对 象 。 这 里 只 是 传递 这 个 参数 。 

在 调用 了 onFormSubmit( ) 函数 之 后 ,handleFormSubmit( ) 函数 调用 setState( ) 方 法 来 关闭 它 的 
表单 。 











/ 





















































2.9 第 (6) 步 : 添加 反 向 数据 流 71 





® 请 注意 , onFormSubmit() 函数 的 结果 不 会 影响 表单 是 否 关闭 。 我 们 调用 onFormSubmit() 
函数 ， 它 最 终 会 创建 对 服务 器 的 异步 调用 。 在 我 们 收 到 服务 器 的 回复 之 前 ， 程 序 会 
继续 执行 ， 这 意味 着 setState( ) 方 法 会 被 调用 。 
如 果 onFormSubmit( ) 函数 调用 失败 了 , 如 服务 器 暂时 无 法 访问 , 在 理想 情况 下 我 们 
需要 有 一 些 方 法 来 显示 错误 消息 并 把 表单 重新 打开 。 


2.9.3 TimersDashboard 组 件 





现在 我 们 已 到 达 了 层次 结构 的 顶层 , 即 TimersDashboard 组 件 。 由 于 此 组 件 将 负责 管理 计时 器 的 
数据 ， 因 此 我 们 将 在 此 处 定义 用 于 处 理 在 叶子 组 件 上 捕获 的 事件 的 逻辑 。 
我 们 关注 的 第 一 个 事件 是 表单 提交 。 当 事件 发 生 时 ， 它 要 么 正在 创建 新 计时 器 ， 要 人 么 正在 更 新 现 
有 计时 右 。 我 们 将 使 用 两 个 单独 的 函数 来 处 理 两 个 不 同 的 事件 : 
@ handleCreateFormSubmit( ) 函数 将 处 理 创 建 表 单 事件 ， 并 作为 属性 传递 给 ToggleableTimerForm 
组 件 。 
e@ handleEditFormSubmit() 将 处 理 更 新 表单 事件 ,并 作为 属性 传递 给 EditableTimerList 组 件 。 


这 两 个 函数 都 沿 着 它们 各 自 的 组 件 层次 结构 向 下 移动 ， 直 到 它们 作为 onFormSubmit( ) 属 性 传递 
到 TimerForm 组 件 。 










































































让 我 们 从 handleCreateFormSubmit 哺 数 开始 ， 它 会 把 新 计时 器 插入 计时 器 列表 的 state 中 : 
time_tracking_ app/public/js/app-3.js 


// 在 TimersDashboard 内 
handleCreateFormSubmit = (timer) => { 
this.createTimer(timer); 


}; 








createTimer = (timer) => { 
const 七 = helpers.newTimer(timer); 
this.setState({ 
timers: this.state.timers.concat(t), 
}); 
}; 


render() { 
return ( 
<div className='ui three column centered grid'> 
<div className='column'> 
<EditableTimerList 
timers={this.state.timers} 
/3 
<ToggleableTimerForm 
onFormSubmit={this.handleCreateFormSubmit} 
/> 
</div> 
</div> 





NY 
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我 们 使 用 helpers.newTimer() 方 法 来 创建 计时 器 对 象 。 可 以 看 一 下 helpers.js 中 的 实现 。 我们 
传人 TimerForm 组 件 中 产生 的 对 象 ， 该 对 象 具有 上 title 和 project 属性 。helpers.newTimer( ) 方 法 
返回 一 个 具有 title 和 project 以 及 新 生成 的 id 属性 的 对 象 。 

下 一 行 调 用 setstate( ) 方 法 ， 把 新 计时 器 附加 到 我 们 在 timers 变量 下 保存 的 计时 器 数组 中 。 我 
们 将 整个 state 对 象 传递 给 setState( ) 方 法 。 





@ 


FormSubmit() ) 和 另 一 个 用 于 
这 种 分 离 遵循 单一 职责 原则 ， 
函数 。 
我 们 已 完成 了 创建 计时 器 流程 的 连接 ， 
状态 管理 。 保存 app. js 并 重新 加 载 浏览 器 。 





你 可 能 想 知道 :为 什么 handleCr 
不 是 严格 要 求 的 , 但 我 们 的 想法 是 , 需要 有 一 个 用 于 处 理事 件 的 函数 (handleCreate- 





eateFormSubmit( ) 和 createTimer( ) 要 分 开 ? 虽然 这 


执行 创建 计时 器 的 函数 (createTimer() )。 
使 我 们 可 以 在 任何 需要 的 地 方 调 用 createTimer() 


从 TimerForm 组 件 中 的 表单 到 TimersDashboard 组 件 的 
切换 并 打开 创建 表单 然后 创建 一 些 新 计时 器 ， 见 图 2-14。 
| 

















Practice squat | Practice squat 
01:30:56 01:30:56 
自 区 自 区 
Start Start | 
Bake squash Bake squash 
00:21:13 | 00:21:13 
自 区 个 区 
二 午 和 | 
Ti | Refine squawk 
Refine squawk 
| 00:00:00 
Project 自 区 
Animal Chores 
PE | Start 
| “3 Cancel 
一 = 
图 2-14 ”点击 “Create” 可 创建 新 计时 器 





2.10 更 新 计时 器 





需要 对 更 新 计时 咒 流 程 给 予 相同 的 处 理 方法 。 但 是 ， 如 你 在 当前 应 用 程序 的 状态 中 所 见 ， 我 们 尚 


未 添加 乡 
要 显示 编辑 表单 , 需要 用 户 点 击 计时 器 
并 告诉 它 翻转 其 子 组 件 以 打开 表单 。 


























li 辑 计 时 咒 的 功能 。 因 此 ， 没 有 办 法 显示 编辑 表单 ， 但 这 是 提交 编辑 表单 的 先决 条 件 。 











上 的 编辑 图 标 。 这 应 该 将 事件 传递 到 EditableTimer 组 件 
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2.10.1 为 Timer 组 件 添加 编辑 功能 


要 通知 应 用 程序 有 用 户 想 要 编辑 计时 带 ， 需 要 将 onclick 属性 添加 到 编辑 按钮 的 span 标签 中 。 
我 们 期 望 得 到 一 个 onEqditclick() 属 性 函数 : 
time_tracking_ app/public/js/app-4.js 


























三 


























{ /* Inside Timer.render() */ } 
<div className='extra content'> 
<span 
className='right floated edit icon' 
onClick={this.props.onEditClick} 
> 
<i className='edit icon' /> 
</span> 
“<span className='right floated trash icon'> 
<i className='trash icon' /> 
</span> 
</div> 





2.10.2 ”更 新 EditableTimer 组 件 


现在 已 准备 好 更 新 EditableTimer 组 件 了 。 同 样 ， 它 将 显示 TimerForm 组 件 ( 如 果 正 在 编辑 ) 
或 单独 的 Timer 组 件 (如 果 没 在 编辑 )。 


让 我 们 为 两 个 都 可 能 存在 的 子 组 件 添加 事件 处 理 程序 。 对 于 TimerForm 组 件 , 需要 处 理 表单 被 关 
闭 或 提交 的 事件 。 对 于 Timer 组 件 ， 需 要 处 理 编 辑 图 标 被 按 下 的 事件 : 
time tracking app/public/js/app-4.js 


// 在 EditableTimer 组 件 内 
handleEditClick = () => { 
this.openForm(); 


}; 





























[0 

























































































handleFormClose = () => { 
this.closeForm(); 


把 


handleSubmit = (timer) => { 
this.props.onFormSubmit(timer); 
this.closeForm(); 


}; 


closeForm = () => { 
this.setState({ editFormOpen: false }); 
}; 


openForm = () => { 
this.setState({ editFormOpen: true }); 
}; 

















将 这 些 事件 处 理 程序 作为 props 向 下 传递 : 
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time_tracking_ app/public/js/app-4.js 





render() { 
if (this.state.editFormOpen) { 
return ( 
<TimerForm 

id={this.props.id} 
title={this.props.title} 
project={this.props.project} 
onFormSubmit={this.handleSubmit} 
onFormClose={this.handleFormClose} 


/> 
和 
} else { 
return ( 
<Timer 
id={this.props.id} 
title={this.props.title} 
project={this.props.project} 
elapsed={this.props.elapsed} 
runningSince={this.props.runningSince} 
onEditClick={this.handleEditClick} 
/> 








是 不 是 看 起 来 有 点 熟悉 ? EditableTimer 组 件 使 用 与 ToggleableTimerForm 组 件 非常 类 似 的 方 
式 处 理 从 TimerForm 组 件 发 出 的 相同 事件 。 这 是 有 道理 的 。 EditableTimer 和 ToggleableTimerForm 
组 件 只 是 TimerForm 和 TimersDashboard 组 件 之 间 的 中 介 。TimersDashboard 组 件 是 定义 提交 函数 
的 处 理 程序 的 地 方 ， 并 将 它们 分 配 到 给 定 的 组 件 树 。 

和 ToggleableTimerForm 组 件 一 样 ，EditableTimer 组 件 对 传人 的 timer 对 象 不 执行 任何 操作 。 
在 handleSubmit() 函 数 中 , EditableTimer 组 件 只 是 盲目 地 将 此 对 象 传递 给 onFormSubmit( ) 属 性 函 
数 ， 然 后 使 用 closeForm( ) 函数 关闭 表单 。 

我 们 将 新 属性 传递 给 Timer 组 件 ， 它 是 onEditClick 函数 。 该 函数 的 行为 在 handleEditClick 
函数 中 定义 ，handleEditClick 函数 将 修改 EditableTimer 组 件 的 状态 并 打开 表单 。 





















































2.10.3 ”更 新 EditableTimerList 组 件 


向 上 移动 一 级 , 我 们 在 EditableTimerList 组 件 中 添加 一 行 代码 , 将 提交 函数 从 TimersDashboard 
组 件 发 送 到 每 个 EditableTimer 组 件 中 : 
time_tracking_app/public/js/app-4.js 
// 在 EditableTimerList 组 件 内 
const timers = this.props.timers.map((timer) => ( 
<EditableTimer 
key={timer .id} 
id={timer .id} 
title={timer .title} 
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project={timer .project} 
elapsed={timer .elapsed} 
runningSince={timer .runningSince} 
onFormSubmit={this.props.onFormSubmit} 
/> 
)); 
A 


EditableTimerList 组 件 不 需要 对 这 个 事件 执行 任何 操作 ， 因 此 我 们 还 是 直接 传递 该 

















2.10.4 在 TimersDashboard 组 件 中 定义 onEditFormSubmit() 函数 

这 个 路 径 的 最 后 一 步 是 定义 和 传递 TrimersDashboard 组 件 中 的 编辑 表单 的 提交 函数 。 

对 于 创建 表单 操作 ,我 们 有 函数 来 创建 具有 指定 属性 的 新 timer 对 象 , 然后 将 这 个 新 对 象 附加 到 

state 中 的 timers 数组 的 末尾 。 

对 于 更 新 表单 操作 ， 我 们 需要 搜索 timers 数组 ， 直 到 找到 正在 更 新 的 timer 对 象 。 如 上 一 章 所 

述 ，state 对 象 是 无 法 直接 更 新 的 ， 我 们 必须 使 用 setState( ) 方 法 。 
因此 ， 我 们 将 使 用 map( ) 方 法 遍历 计时 器 对 象 数组 。 如 果 计 时 器 的 id 与 提交 的 表单 的 id 匹配 ， 

则 会 返回 一 个 属性 已 更 新 后 的 计时 器 的 新 对 象 ; 否则 ， 只 会 返回 原来 的 计时 器 。 这 个 新 计时 融 对 象 数 


[ES 


组 将 被 传 给 setstate() 方 法 : 
time_tracking app/public/js/app-4.js 


// 在 TimersDashboard 组 件 内 
handleEditFormSubmit = (attrs) => { 
this.updateTimer(attrs); 


}; 

















































































































createTimer = (timer) => { 
const t = helpers.newTimer(timer); 
this.setState({ 
timers: this.state.timers.concat(t), 
})s 
二 


updateTimer = (attrs) => { 
this.setState({ 
timers: this.state.timers.map((timer) => { 
if (timer.id === attrs.id) { 
return Object.assign({}, timer, { 
title: attrs.title, 
project: attrs.project, 
的 
} else { 
return timer; 
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我 们 在 render( ) 方 法 内 将 handleEditFormSubmit 六 数 作为 一 个 属性 向 下 传递 ; 
time_tracking_app/public/js/app-4.js 





{ /* 在 TimersDashboard.render() 方 法 内 */ } 
<EditableTimerlL ist 
timers={this.state.timers} 
onFormSubmit={this.handleEditFormSubmit} 
/> 





请 注意 ， 可 以 在 传递 给 setState( ) 方 法 的 JavaScript 对 象 中 调用 this .state.timers 数组 的 map() 
方法 。 这 是 一 种 常用 的 模式 。map( ) 方 法 调用 会 被 执行 ， 然 后 timers 属性 会 被 设置 为 返回 的 结果 。 

在 map( ) 函数 内 部 ， 需 要 检查 timer 对 象 是 否 与 正在 更 新 的 计时 器 匹配 。 如 果 不 匹 配 ， 则 只 返 
原 timer 对 象 。 和 否则， 使 用 object#assign( ) 方 法 返回 属性 更 新 后 的 计时 需 的 新 对 象 。 

请 记 住 , 将 state 视 为 不 可 变 很 重要 。 我 们 通过 创建 一 个 新 timers 对 象 , 然后 使 用 Objectsassign( ) 
方法 来 给 它 赋值 ， 并 不 会 修改 任何 处 于 state 中 的 对 象 。 














加 















































@ 最 后 一 章 会 讨论 0Object#assign( ) 方 法 。 





正如 对 ToggleableTimerForm 组 件 和 handleCreateFormSubmit 也 数 所 做 的 那样 ， 我 们 也 会 把 
handleEditFormSubmit 函数 作为 onFormSubmit 的 属性 传递 下 去 .TimerForm 组 件 调 用 了 这 个 属性 函数 ， 
忽略 了 该 函数 在 EditableTimer 组 件 下 演 染 与 在 ToggleableTimerForm 组 件 下 演 染 是 完全 不 同 的 事实 。 

这 两 个 表单 都 已 连接 起 来 了 ! 保存 app. js,， 重新 加 载 页 面 , 并 尝试 去 创建 和 更 新 计时 器 。 还 可 以 
在 打开 的 表单 上 点 击 “Cancel” 按 钮 来 关闭 它 ， 见 图 2-15。 

















4 








| 














Practice squat | Practice squat 
01:30:56 01:30:56 
个 区 站 区 
| Start | | Start 
Title | Bake squash 
Bake squash | 00 21 13 
Project | Fr " 证 区 
Kitchen Chores | [ Rt 
| co | | 
二 
| 
| 
| 


图 2-15 在 打开 的 表单 上 点 “Cancel” 按 钮 


其 余 的 工作 在 计时 器 中 ， 我 们 需要 : 


e 连接 删除 按钮 (删除 计时 器 ); 
e 实现 启动 /停止 按钮 及 其 本 身 的 计时 逻辑 。 
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到 那 时 ， 我 们 将 拥有 一 个 完整 的 无 服务 器 解决 方案 。 
动手 试 一 试 : 在 继续 下 一 节 之 前 ， 看 看 你 离 可 以 自行 连接 删除 按钮 的 距离 还 有 多 远 ， 然 后 继续 并 
验证 你 的 解决 方案 。 


2.11 删除 计时 器 


2.11.1 ”为 Timer 组 件 添加 事件 处 理 程序 


在 Timer 组 件 中 ,我 们 定义 了 一 个 处 理 删 除 按钮 点 击 
time_tracking_app/public/js/app-$.js 











山中 





和 件 的 函数 : 





class Timer extends React.Component { 
handleTrashClick = () => { 

this.props.onTrashClick(this.props.id); 

3 


render() { 























然后 使 用 onclick 属性 将 该 函数 连接 到 垃圾 桶 图 标 : 
time_tracking_ app/public/js/app-S.js 


{ /* 在 Timer.render() 方 法 内 */ } 
<div className='extra content'> 
<Span 
className='right floated edit icon' 
onClick={this.props.onEditClick} 
> 
<i className='edit icon' /> 
</span> 
<span 
className='right floated trash icon' 
onClick={this.handleTrashClick} 
> 
<i className='trash icon' /> 
</span> 
</div> 




















设置 为 onTrashClick() 属 性 的 函数 还 没有 定义 。 但 可 以 想象 当 这 个 事件 到 达 顶 部 (TimersDashboard 
组 件 ) 时 , 我 们 要 用 id 来 筛选 出 需要 删除 的 计时 器 。handleTrashclick( ) 方 法 则 为 这 个 函数 提供 id。 


2.11.2 ”通过 EditableTimer 组 件 进行 路 由 


EditableTimer 组 件 只 是 代理 了 函数 : 
time_tracking app/public/js/app-S.js 
// 在 EditableTimer 组 件 内 
} else { 
return ( 


<Timer 
id={this.props.id} 
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title={this.props.title} 

project={this.props.project} 

elapsed={this.props.elapsed} 

runningSince={this.props.runningSince} 

onEditClick={this.handleEditClick} 

onTrashClick={this .props.onTrashClick} 
2 





2.11.3 ”通过 EditableTimerList 组 件 进行 路 由 


EditableTimerList 组 件 做 法 也 一 样 : 
time_tracking_app/public/js/app-S.js 


// 在 EditableTimerList .render( ) 有 函数 内 
const timers = this.props.timers.map((timer) => ( 
<EditableTimer 
key={timer .id} 
id={timer .id} 
title={timer .title} 
project={timer .project} 
elapsed={timer .elapsed} 
runningSince={timer .runningSince} 
onNnFormSubmit={this.props.onFormSubmit} 
onTrashClick={this.props.onTrashClick} 
/> 
)); 

















2.11.4 ”在 TimersDashboard 组 件 中 实现 删除 功能 
最 后 一 步 是 在 TimersDashboard 组 件 中 定义 从 state 数组 中 删除 所 需 计 时 屁 的 函数 ,在 JavaScript 
中 有 很 多 方法 可 以 实现 这 一 点 。 如 果 你 的 解决 方案 不 一 样 ， 或 者 没有 完全 解决 问题 ， 请 不 要 着 急 。 
需要 添加 最 终 作 为 属性 传递 的 处 理 函 数 : 
time tracking app/public/js/app-$.js 

















// 在 TimersDashboard 组 件 内 
handleEditFormSubmit = (attrs) => { 
this.updateTimer(attrs); 
}» 


handleTrashClick = (timer1d) => { 
this.deleteTimer(timer1d); 
二 


deleteTimer( ) 函数 使 用 Array 对 象 的 filter() 方 法 并 返回 新 数组 , 移 除 了 具有 与 timerId 匹配 
的 id 的 timer 对 象 : 
time_tracking_app/public/js/app-S.js 

















// 在 TimersDashboard 组 件 内 
deleteTimer = (timerId) => { 
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this.setState({ 
timers: this.state.timers.filter(t => t 上 .id !== timerId), 
}); 
}; 


最 后 将 handleTrashClick( ) 函数 作为 属性 传递 
time_tracking_app/public/js/app-$.js 











{ /* 在 TimersDashboard.render() 方 法 内 */ } 

<EditableTimerList 
timers={this.state.timers} 
onFormSubmit={this.handleEditFormSubmit} 
onTrashClick={this.handleTrashClick} 

六 





个 Array 对 象 的 filter() 方 法 接收 一 个 函数 ， 该 函数 用 于 “测试 ”数组 中 的 每 个 元 素 。 
filter() 方 法 返回 一 个 包含 “通过 ”测试 的 所 有 元 素 的 新 数组 。 如 果 函 数 返回 true， 
则 保留 元 素 。 


保存 app. js 并 重新 加 载 应 用 程序 。 现 在 可 以 删除 计时 器 了 ， 见 图 2-16。 




















Practice squat Practice squat 
01:30:56 01:30:56 
站 区 区 
Start | | Start 
Bake squash 记 
00:21:13 
Wy 
| start | 
二 














图 2-16 点 垃圾 桶 图 标 可 删除 计时 器 


2.12 ”添加 计时 功能 


现在 创建 、 更 新 和 删除 功能 已 为 计时 器 准备 好 了 。 下 一 个 挑战 是 让 这 些 计 时 髓 发 挥 作用 。 

可 以 通过 几 种 不 同 的 方式 来 实现 计时 融 系 统 。 最 简单 的 方法 是 让 函数 每 秒 更 新 每 个 计时 髓 的 
elapsed 属性 ， 但 这 是 非常 有 限 的 。 当 应 用 程序 关闭 后 会 发 生 什 么 ”计时 需 应 继续 “运行 ”。 

这 就 是 为 什么 我 们 包含 了 计时 器 的 runningSince 属性 。 计 时 器 初始 化 时 , elapsed 值 为 0。 当 用 
户 点 击 “Start”( 开始 ) 按钮 时 ， 我们 不 会 增加 elapsed 的 值 。 相 反 ， 只 是 将 runningSince 的 值 设 为 
开始 时 间 。 
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然后 ， 可 以 用 当前 时 间 和 开始 时 间 之 差 来 为 用 户 泻 染 时 间 。 当 用 户 点 击 “Stop”( 停止 ) 按钮 时 ， 
当前 时 间 和 开始 时 间 之 差 将 被 添加 到 elapsed 中 。 同 时 设置 runningsince 属性 的 值 为 nul1。 
因此 ， 在 任何 给 定 的 时 间 里 ,我们 都 可 以 通过 Date.now() - runningSince 的 值 推导 出 计时 器 
已 运行 的 时 间 ， 并 将 其 添加 到 总 累计 时 间 (elapsed ) 里 。 我 们 将 在 Timer 组 件 中 对 这 些 进行 计算 。 

为 了 使 应 用 程序 运行 起 来 像 真 正 的 计时 器 , 我 们 希望 React 不 断 地 执行 此 操作 并 重新 泻 染 计时 器 。 
但 是 计时 器 在 运行 时 不 会 改变 elapsed 和 runningSince 的 值 。 因 此 到 目前 为 止 ， 可 以 看 到 通过 触发 
来 调用 render( ) 方 法 的 机 制 还 不 完善 。 

不 过 可 以 使 用 React 的 forceUpdate( ) 方 法 来 替代 。 它 会 强制 组 件 习 
隔 内 调用 它 ， 从 而 使 实时 计时 器 的 外 观 显得 更 加 流畅 。 


2.12.1 为 Timer 组 件 添加 forceUpdate( ) 间 隔 函 数 


2 一 


helpers .renderElapsedString() 方 法 接收 的 第 二 个 参数 runningSince 是 可 选 的 。 它 将 
Date.now() - runningSince 的 值 与 elapsed 相 加 ， 并 使 用 millisecondsToHuman( ) 哨 数 返 回 格式 
为 HH:MM: SS 的 字符 串 。 

我 们 将 在 组 件 挂 载 后 创建 一 个 间隔 函数 来 运行 forceUpdate( ) 方 法 : 

time_tracking_app/public/js/app-6.js 




































































HE 





新 泻 染 。 可 以 在 一 段 时 间 间 









































class Timer extends React.Component { 
componentDidMount() { 
this. forceUpdateInterval = setInterval(() => this.forceUpdate(), 50); 
} 


componentWillUnmount() { 
clearIinterval(this. forceUpdateInterval); 


} 


handleTrashClick = () => { 
this.props.onTrashClick(this.props.id); 
| 


render() { 
const elapsedString = helpers.renderElapsedString( 
this.props.elapsed, this.props.runningSince 
); 


; 
return ( 





在 componentDidMount() 函数 中 , 我 们 使 用 了 JavaScript 的 setInterval( ) 隐 数 。 它 会 每 50 毫秒 
调用 一 次 forceUpdate() 函数 ， 导 致 组 件 重 新 泻 染 。 我 们 将 setInterval() 函数 的 返回 值 设 置 为 


this.forceUpdateInterval。 


















































在 componentwillUnmount() 函 数 中 ,我们 使 用 clearInterval() 方 法 来 停止 this. forceUpdate- 
Interval 的 间隔 执行 。componentwillUnmount( ) 方 法 会 在 应 用 程序 删除 组 件 之 前 调用 。 如 果 计 时 需 
被 市 除 ， 它 就 会 发 生 。 我 们 希望 能 确保 在 页 面 删 除 计时 器 后 就 不 再 继续 调用 forceUpdate( ) 方 法 ， 否 
则 React 会 抛 出 错误 。 
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省 setInterval() 函数 接收 两 个 参数 : 第 一 个 是 你 想 要 重复 调用 的 函数 ; 第 二 个 是 调 
用 该 函数 的 时 间 间 隔 ( 以 毫秒 为 单位 )。 
setInterval( ) 函数 返回 唯一 的 间隔 ID。 可 以 随时 将 此 间隔 JD 传递 给 clearInterval() 
方法 以 停止 间隔 执行 。 





你 可 能 会 问 : 如 果 不 在 已 停止 的 计时 器 上 连续 调用 forceUpdate() 方 法 ， 会 不 会 更 
3) 有 效率 ? 
实际 上 ， 这 可 以 节省 几 个 循环 操作 ， 但 由 此 增加 的 代码 复杂 性 是 不 值得 的 。React 
会 调用 render() 方 法 ， 该 方法 在 JavaScript 中 执行 一 些 不 耗 时 的 操作 ， 然 后 React 
会 将 这 次 与 前 一 次 调用 render() 方 法 的 结果 进行 比较 ,可 以 看 到 并 没有 发 生 任何 变 
化 。React 应 用 程序 停 在 那里 ， 并 不 会 尝试 任何 DOM 操作 。 


@ 50 毫秒 的 间隔 不 是 科学 推导 出 来 的 。 选 择 太 高 的 间隔 会 让 计时 器 看 起 来 不 太 自 然 。 


它 会 在 各 个 值 之 间 不 均匀 地 跳跃 。 选 择 太 低 的 间隔 只 会 增加 大 量 不 必要 的 工作 。50 
毫秒 的 间隔 对 人 来 说 很 好 ， 且 在 计算 机 领域 中 比较 长 。 


2.12.2” 试 试看 
保存 app.js 并 重新 加 载 。 第 一 个 计时 器 应 该 在 运行 中 。 
我 们 已 开始 开发 真正 实用 的 应 用 程序 了 ! 只 需 连 接 启 动 /停止 按钮 , 无 服务 器 的 应 用 程序 的 功能 就 


将 完成 。 
2.13 ”添加 启动 和 停止 功能 


如 果 计 时 器 是 暂停 状态 ， 底 部 的 操作 按钮 应 显示 “Start”; 如 果 计时 器 正在 运行 中 ， 底 部 的 操作 
按钮 则 应 显示 “Stop”。 该 按钮 还 应 该 在 被 点 击 时 传递 事件 , 具体 取决 于 计时 器 状态 是 停止 还 是 启动 的 。 

可 以 将 所 有 的 这 些 功能 构建 到 Timer 组 件 中 且 可 以 让 Timer 组 件 决定 演 染 哪个 HTML 片段 ， 这 
取决 于 它 是 否 在 运行 。 这 会 给 Timer 组 件 增加 更 多 的 职责 和 复杂 性 。 不 过 可 以 让 按钮 拥有 自己 的 React 
组 件 。 


2.13.1 为 Timer 组 件 添加 计时 器 操作 事件 


让 我 们 修改 Timer 组 件 ， 并 期 望 得 到 一 个 名 为 TimerActionButton 的 新 组 件 。 这 个 按钮 只 需 
知道 计时 器 是 否 在 运行 。 它 还 需 能 够 传递 两 个 事件 : onStartClick() 和 onStopClick()。 这 些 事件 最 
终 需 要 一 直 传 递 到 TimersDashboard 组 件 ， 因 为 只 有 它 才 可 以 修改 计时 器 上 的 runningSince 属性 。 
首先 看 一 下 事件 处 理 程序 : 
time_tracking_app/public/js/app-7.js 
// 在 Timer 组 件 内 


componentWillUnmount() { 
clearInterval(this.forceUpdateInterval ) ; 
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} 


handleStartClick = () => { 
this.props.onStartClick(this.props.id); 


}; 


handleStopClick = () => { 
this.props.onStopClick(this.props.id); 

] 

A 











然后 我 们 将 在 render( ) 方 法 内 部 的 最 外 层 div 的 底部 声明 TimerActionButton 组 件 : 


time_tracking_ app/public/js/app-7.js 

{/* 在 Timer.render() 方 法 底部 */} 

<TimerActionButton 
timerIsRunning={! !this.props.runningSince} 
onStartClick={this.handleStartClick} 
onStopClick={this.handleStopClick} 

1 

</div> 


这 

















我 们 使 用 了 和 其 他 点 击 事件 处 理 程序 相同 的 技术 : HTML 元 素 上 的 onclick 属性 指定 一 个 在 组 件 
中 调用 属性 函数 的 处 理 函 数 ， 并 传人 计时 器 的 id 作为 参数 。 





























这 里 使 用 !1 为 TimerActionButton 组 件 派 生 布尔 属性 timerIsRunning 。 当 
runningSince 值 为 null 时 ，!! 返 回 false。 


2.13.2 ”创建 TimerActionButton 组 件 


下 面 开 始 创 建 TimerActionButton 组 件 : 

















time_tracking app/public/js/app-7.js 





class TimerActionButton extends React .Component { 
render() { 
if (this.props.timerIsRunning) { 
return ( 
《<div 
className='ui bottom attached red basic button' 
onClick={this.props.onStopClick} 
> 
Stop 
</div> 
2) 
} else { 
return ( 
<div 
className='ui bottom attached green basic button' 
onClick={this.props.onStartClick} 
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Start 
</div> 
} 
} 
} 


我 们 根据 this .props .timerIsRunning 属性 来 确定 演 染 哪 一 个 HTML 片段 。 
你 知道 该 怎么 做 。 下 面 需要 在 组 件 层 次 结构 中 运行 这 些 事件 , 直到 可 以 管理 状态 的 TimersDashboard 
组 件 。 




















2.13.3 ”通过 EdqitableTimer 和 EditableTimerList 运 行事 件 


首先 是 EditableTimer 组 件 : 


time_tracking app/public/js/app-7.js 








// 在 EditableTimer 组 件 内 
} else { 
return ( 
<Timer 
id={this.props.id} 
title={this.props.title} 
project={this.props.project} 
elapsed={this.props.elapsed} 
runningSince={this.props.runningSince} 
onEditClick={this.handleEditClick} 
onTrashClick={this.props.onTrashClick} 
onStartClick={this.props.onStartClick} 
onStopClick={this.props.onStopClick} 
Po 
D> 
} 








然后 是 EditableTimerList 组 件 : 
time_tracking_app/public/js/app-7.js 





// 在 EditableTimerList 组 件 内 
const timers = this.props.timers.map((timer) => ( 
<EditableTimer 
key={timer .id} 
id={timer .id} 
title={timer .title} 
project={timer .project} 
elapsed={timer .elapsed} 
runningSince={timer .runningSince} 
onFormSubmit={this.props.onFormSubmit} 
onTrashClick={this.props.onTrashClick} 
onStartClick={this.props.onStartClick} 
onStopClick={this.props.onStopClick} 
/> 
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最 后 在 TimersDashboard 组 件 中 定义 这 些 函 数 。 它 们 应 该 使 用 map( ) 方 法 来 搜索 state 中 的 计时 
器 数组 ， 在 找到 匹配 的 计时 器 时 给 runningSince 设置 合适 的 值 。 


首先 定义 处 理 函 数 : 
time_tracking_ app/public/js/app-7.js 




















// 在 TimersDashboard 组 件 内 
handleTrashClick = (timerId) => { 
this.deleteTimer(timerId) ; 

挝 


handleStartClick = (timerId) => { 
this.startTimer(timerId):; 


}; 


handleStopClick = (timerId) => { 
this.stopTimer(timer1d); 
和 





接着 是 startTimer( ) 和 stopTimer( ) 哺 数 : 
time_tracking _app/public/js/app-7.js 





deleteTimer = (timerId) => { 
this.setState({ 
timers: this.state.timers.filter(t => t.id !== timerId), 
站 
}; 


startTimer = (timerI1d) => { 
const now = Date.now(); 


this.setState({ 
timers: this.state.timers.map((timer) => { 
if (timer.id === timerId) { 
return Object.assign({}, timer, { 
runningSince: now, 
}); 
} else { 
return timer; 
} 
}), 
}); 
把 


stopTimer = (timerId) => { 
const now = Date.now(); 


this.setState({ 
timers: this.state.timers.map((timer) => { 
if (timer.id === timerId) { 
const lastElapsed = now - timer.runningSince; 
return Object.assign({}, timer, { 
elapsed: timer.elapsed + lastElapsed, 
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runningSince: null, 
}); 
} else { 
return timer; 
} 
}), 
}); 
}; 





最 后 将 这 些 函 数 作为 props 传递 下 去 : 
time_tracking_app/public/js/app-7.js 





{/* 在 TimerDashboard.render() 方 法 内 */} 

《EditableTimerList 
timers={this.state.timers} 
onFormSubmit={this.handleEditFormSubmit} 
onTrashClick={this.handleTrashClick} 
onStartClick={this.handleStartClick} 
onStopClick={this.handleStopClick} 

2 








当 startTimer( ) 方 法 在 其 map( ) 方 法 调用 中 遇 到 相关 联 的 计时 器 时 , 它 会 将 该 计时 顺 的 runningSince 





属性 的 值 设 置 为 当前 时 间 。 


stopTimer( ) 方 法 计算 lastElapsed 的 值 , 它 是 计时 器 自 启动 以 来 运行 的 时 间 总 量 。 该 方法 会 将 此 








数量 添加 到 elapsed 属性 并 将 runningSince 属性 设置 为 nul1l1， 然 后 “停止 ”计时 器 。 
2.13.4” 试 试看 


时 ， 











保存 app. js， 重新 加 载 浏 览 器 ,注意 看 ! 现在 可 以 创建 、 更 新 和 删除 计时 器 ， 也 可 以 用 它们 来 计 
见 图 2-17。 




















Practice squat Practice squat 
01:31:08 01:31:09 
言 区 全 区 
Stop 中 | | Start 
Bake squash Bake squash 
00:21:13 00:21:13 
[= 区 请 区 
| Start | | Start | 
+ 二 


图 2-17 重新 加 载 浏览 器 之 后 的 页 面 
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这 是 很 好 的 进展 。 但 是 ， 如 果 没 有 连接 到 服务 器 ， 应 用 程序 的 存在 则 很 短暂 。 如 果 刷 新 页 面 ， 则 
将 丢失 所 有 的 计时 需 数 据 。 这 是 因为 应 用 程序 没有 任何 持久 性 。 

服务 器 可 以 给 我 们 持久 性 。 我 们 会 让 服务 器 把 计时 器 数据 的 所 有 更 改写 人 文件 。 当 应 用 程序 加 载 
数据 时 , 我 们 不 会 对 TimersDashboard 组 件 内 部 的 状态 进行 硬 编码 , 而 是 查询 服务 器 并 根据 服务 器 提 
供 的 数据 构建 计时 器 的 状态 。 然 后 我 们 会 让 React 应 用 程序 通知 服务 器 所 有 状态 的 变化 ， 例 如 启动 一 
个 计时 器 。 

与 服务 器 通信 是 使 用 React 开发 和 分 发 实际 Web 应 用 程序 所 需 的 最 后 一 个 主要 的 构建 模块 。 













































































2.14 方法 回顾 

在 构建 计时 器 应 用 程序 时 ， 我 们 学 习 并 应 用 了 构建 React 应 用 程序 的 方法 。 再 次 回顾 一 下 这 

(1) 将 应 用 程序 分 解 为 多 个 组 件 

通过 查看 应 用 程序 的 工作 UI, 我 们 绘制 了 应 用 程序 的 组 件 结构 图 。 然后 , 应 用 单一 职责 原则 来 分 
解 组 件 ， 使 每 个 组 件 具 有 了 最 小 的 可 行 功能 。 

(2) 构建 应 用 程序 的 静态 版 本 

底层 (用户 可 见 ) 组 件 基于 从 父 对 象 传递 的 静态 的 props 来 渲染 HTML。 

(3) 确定 哪些 组 件 应 该 是 有 状态 的 

我 们 运用 了 一 系列 的 问题 来 推断 出 哪些 数据 应 该 是 有 状态 的 。 这 些 数据 在 静态 应 用 程序 中 表示 
为 props。 

(4) 确定 每 个 state 应 该 位 于 哪个 组 件 中 


我 们 运用 了 男 一 系列 的 问题 来 确定 哪个 组 件 应 该 拥有 state。TimersDashboard 组 件 拥 有 计时 需 的 
state 数据 ，ToggleableTimerForm 和 EditableTimer 组 件 都 持 有 是 否 泻 染 TimerForm 组 件 相关 的 state。 


(5) 通过 硬 编码 来 初始 化 state 
然后 使 用 硬 编码 的 值 来 初始 化 state 所 有 者 的 state 属性 。 
(6) 添加 反 向 数据 流 


我 们 通过 使 用 onclick 处 理 程序 来 修饰 按钮 以 增加 交互 性 。 这些 被 调用 的 函数 作为 props 从 所 有 
拥有 相关 state 操作 的 组 件 中 传递 到 下 级 层次 结构 。 


最 后 一 步 是 第 (7) 步 : 添加 服务 器 通信 。 下 一 章 将 解决 这 个 问题 。 
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上 一 章 使 用 了 一 种 方法 来 构建 React 应 用 程序 。 计 时 器 的 状态 管理 发 生 在 TimersDashboard 顶层 
组 件 中 。 和 所 有 React 应 用 程序 一 样 ， 数 据 从 顶部 经 过 组 件 树 向 下 流向 叶子 组 件 。 叶 子 组 件 通 过 调用 
属性 函数 将 事件 传递 给 状态 管理 者 。 

目前 ，TimersDashboard 组 件 的 初始 状态 是 通过 硬 编码 实现 的 。 对 状态 的 任何 更 改 只 会 在 浏览 
窗口 打开 时 生效 。 这 是 因为 所 有 的 状态 变化 都 发 生 在 React 内 部 的 内 存 中 。 我 们 需要 React 应 用 程序 
与 服务 器 通信 。 服 务 器 将 负责 持久 化 数据 。 在 React 应 用 程序 中 ， 数 据 的 持久 化 发 生 在 data. json 文 
件 中 。 

EditableTimer 和 ToggleableTimerForm 也 有 硬 编码 的 初始 状态 。 但 因为 这 种 状态 只 用 来 表示 它 
们 的 表单 是 否 打开 ， 所 以 无 须 将 这 些 状 态 变 化 传达 给 服务 器 。 可 以 在 每 次 应 用 程序 启动 时 将 表单 设置 
为 关闭 状态 。 


准备 

为 了 帮助 你 熟悉 这 个 项 目的 API， 并 使 你 能 够 在 一 般 情 况 下 使 用 它 ， 我 们 准备 了 一 个 简短 的 章节 
来 介绍 它 ， 并 在 React 之 外 向 API 发 出 请 求 。 

curl 

我 们 将 使 用 curl 工具 从 命令 行 发 出 更 多 复杂 的 请 求 。 

OSX 用 户 的 系统 应 该 已 安装 了 curl 工具 。 

Windows 用 户 可 以 在 curl 网 站 的 Download 页 面 下 载 并 安装 curl。 



























































3.2 server.js 


此 项 目 文件 夹 的 根 目 录 中 包含 一 个 名 为 server .js 的 文件 。 这 是 专 为 时 间 跟 踪 应 用 程序 设计 的 
Node.js 服务 需 。 


你 不 必 去 了 解 有 关 Node.js 或 一 般 服务 器 的 任何 信息 就 可 以 使 用 我 们 提供 的 服务 器 。 
我 们 会 为 你 提供 所 需 的 相关 指导 。 








88 第 3 章 组 件 和 服务 器 





server .js 使 用 data. json 文件 作为 它 的 “数据 仓库 ”。 服 务 需 通过 读 取 和 写 人 此 文件 来 持久 化 
数据 。 你 可 以 看 一 下 该 文件 以 查看 我 们 提供 的 数据 仓库 的 初始 状态 。 

当 server .js 被 要 求 提供 所 有 子 项 数据 时 ， 它 将 返回 data. json 的 内 容 。 当 服务 器 收 到 通知 时 ， 
任何 更 新 、 删 除 或 计时 器 停止 和 启动 的 状态 都 会 在 data. json 中 反映 。 即 使 重新 加 载 或 关闭 浏览 
数据 也 会 以 这 种 方式 被 保存 。 

在 开始 使 用 服务 器 之 前 ， 简 要 介绍 一 下 它 的 APl。 同 样 ， 如 果 这 个 大 纲 有 点 令 人 困惑 ， 请 不 要 担 
心 。 随 着 我 们 开始 编写 一 些 代 码 ， 它 有 望 变 得 更 加 清晰 。 




















3.3 ”服务 器 API 


本 章 的 最 终日 标 是 在 服务 器 上 复制 状态 的 更 改 。 我们 不 会 将 所 有 状态 的 管理 都 专门 转移 到 服务 器 
上 。 相 反 ， 服 务 咒 会 维护 它 自己 的 状态 (在 data.json 中 )， 而 React 也 是 如 此 (在 本 例 中 ， 它 存在 
于 TimersDashboard 组 件 中 的 this .state 对 象 内 )， 见 图 3-1。 稍 后 将 演示 为 什么 在 两 个 地 方 都 保持 
状态 是 可 取 的 。 








Edgaple Toggleable- 
TimerList TimerForm 


3-1 TimersDashboard 组 件 与 服务 器 通信 


如 果 我 们 对 要 持久 化 React (“客户 端 ”) 状态 执行 操作 ， 则 还 需要 通知 服务 器 该 状态 的 更 改 。 这 

将 使 得 两 个 状态 保持 同步 。 我 们 会 着 重 考虑 这 些 “ 写 ”操作 。 需 要 发 送 给 服务 器 的 写 操作 如 下 所 示 : 
创建 计时 器 ; 

更 新 计时 器 ; 

删除 计时 器 ; 

启动 计时 器 ; 

停止 计时 器 。 

我 们 只 有 一 个 读 操 作 : 从 服务 器 请 求 所 有 计时 器 数据 。 
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1 HTTP API 
本 节 假 定 你 熟悉 HTTP API。 如 果 不 熟 悉 ， 则 可 能 需要 阅读 相关 的 文档 。 
但 是 ， 暂时 不 要 停止 学 习 本 章 。 本 质 上 , 我 们 所 做 的 就 是 从 浏览 器 发 起 一 个 “调用 ” 
到 本 地 服务 器 ， 并 遵循 指定 的 格式 。 


3.3.1 text/htm1l 端 点 
对 / 〈 根 路 径 ) 发 出 GET 请 求 


实际 上 在 整个 过 程 中 ,server . js 一 直人 负责 为 应 用 程序 提供 服务 。 当 浏览 器 请 求 localhost :30688/ 
时 ， 服 务 器 会 返回 index.html 文件 。index.html 加 载 了 我 们 所 有 的 JavaScript 和 React 代码 。 

















@ 请 注意 ,React 从 不 会 用 此 路 径 向 服务 器 发 出 请 求 ,这 只 用 于 浏览 器 来 加 载 应 用 程序 。 
React 只 会 与 JSON 端点 进行 通信 。 


3.3.2 JSON 端 点 


data.json 是 一 个 JSON 文档 。 如 上 一 章 所 述 ，JSON 是 一 种 存储 人 类 可 读 的 数据 对 象 的 格式 。 
可 以 将 JavaScript 对 象 序列 化 为 JSON。 这 使 得 JavaScript 对 象 可 以 存储 在 文本 文件 中 ， 也 能 在 网 络 
中 传输 。 


data. json 包含 一 个 对 象 数 组 。 该 数组 中 的 数据 虽然 不 是 严格 的 JavaScript, 但 可 以 很 容易 地 加 载 
到 JavaScript 中 。 


在 server .js 中 ， 可 以 看 到 如 下 几 行 : 


fs.readFile(DATA_FILE, function(err, data) { 
const timers = JSON.parse(data); 
1 es 

}); 


data 是 一 个 字符 串 ，JSON.JSON.parse( ) 方 法 将 该 字符 串 转 换 为 实际 的 JavaScript 对 象 数组 。 
GET /api/timers 端点 

返回 所 有 计时 器 的 列表 。 

POST /api/timers 端点 


接收 一 个 带 有 title、project 和 id 属性 的 JSON 作为 HTTP 请 求 体 ， 并 将 新 的 计时 器 对 象 插入 
数据 仓库 中 。 


POST /api/timers/start 端点 


接收 一 个 带 有 id 和 start (时间 戳 ) 属性 的 JSON 作为 HTTP 请 求 体 ; 搜索 数据 仓库 并 找到 具有 
匹配 id 的 计时 器 ; 设置 runningSince 的 值 为 start。 


POST /api/timers/stop 端点 
接收 一 个 带 有 id 属性 和 stop ( 时间 惟 ) 属性 的 JSON 作为 HTTP 请 求 体 ; 搜索 数据 仓库 并 找到 
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具有 匹配 id 的 计时 器 ; 根据 计时 器 运行 的 时 间 (stop - runningSince ) 修改 elapsed 的 值 ; 将 
runningSince 的 值 设置 为 null。 

PUT /api/timers 端点 

接收 一 个 带 有 id、title 和 project 属性 (title 和 project 不 要 求全 部 包含 ， 可 只 包含 其 一 ) 
的 JSON 作为 HITP 请 求 体 ; 搜索 数据 仓库 并 找到 具有 匹配 id 的 计时 器 ; 将 title 和 project 更 新 
为 新 属性 。 

DELETE /api/timers 端点 

接收 一 个 带 有 id 属性 的 JSON 作为 HTTP 请 求 体 ,搜索 数据 仓库 并 删除 具有 匹配 id 的 计时 器 。 























3.4 使 用 API 
如 果 服 务 器 未 启动 ， 请 确保 启动 它 : 


npm start 

你 可 以 在 浏览 器 中 访问 /api/timers 端点 并 查看 JSON 响 Y ( localhost :3000/api/timers )。 当 
你 在 浏览 器 中 访问 新 的 URL 时 ， 它 会 发 出 一 个 GET 请 求 。 因 此 浏览 器 调用 GET /api/timers 端点 时 
服务 器 会 返回 所 有 计时 器 数据 ， 见 图 3-2。 























® 9 四 /Iocalhost:3000/apiliimers x 懒汉 React 


GC © localhost:3000/api/timers 站 


[{"title": "Mow the lawn", "project": "House Chores", "elapsed" (i -a "0a4a79cb-b06d- 
4cbl-883d-549a1e3b6697" 7 title": "Clear paper jam", "project": "Offi 

Chores", "elapsed" :1273998, "id" "a73c1d19-£32d-4aff-b470" e67924062" },{"title":"Ponder 
origins of universe", "project":"Life Chores","id":"2c43306e-5b44-4f£8-8753- 
33c35adbdo6E", “elapsed":11750, "runningsince":1456225941911}] 


图 3-2 服务 器 返回 所 有 计时 器 的 数据 
请 注意 ， 服 务 器 剥离 了 data. json 中 的 所 有 无 关 空格 ， 包 括 换行 符 ， 以 保证 有 效 负载 尽 可 能 小 。 
那些 空格 只 存在 于 data. json 中 ， 使 其 更 具 可 读 性 。 


可 以 使 用 像 JSONView 这 样 的 Chrome 扩展 工具 来 美化 原始 JSON。JSONView 会 采用 这 些 原始 
JSON 块 并 把 空格 添加 回来 以 提高 可 读 性 ， 见 图 3-3。 
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eose 园 localhost:3000/api/timers x React 


六 GC © localhost:3000/api/timers 食 








= 起 
title: "Mow the lawn", 
Pproject: "House Chores", 
elapsed: 5456099, 
id: "0a4a79cb-b06d-4cbl-883d-549ale3bt6d7" 


title: "Clear paper jam", 

project: "Office Chores", 

elapsed: 1273998, 

id: "a73cld19-£32d-4aff-b470-cea4e792406a" 





title: "Ponder origins of universe", 
project: "Life Chores", 

ia: "2c43306e-5b44-4ff8-8753-33c35adbd06f"， 
elapsed: 11750, 

runningSince: 1456225941911 


图 3-3 ”安装 JSONView 后 再 访问 端点 


我 们 只 能 轻松 地 使 用 浏览 器 发 出 GET 请 求 。 对 于 写 入 数据 ( 如 启动 和 停止 计时 器 )， 我 们 必须 发 
出 POST、PUT 或 DELETE 请 求 。 因 此 我 们 将 使 用 cur1l 来 写 人 数据。 


在 命令 行 中 运行 以 下 命令 : 
$ curl -X GET localhost:3000/api/timers 


-X 标志 指定 要 使 用 的 HTTP 方法 。 此 请 求 应 该 会 返回 一 个 看 起 来 有 点 像 下 面 这 样 的 响应 数据 : 


[{"title":"Mow the lawn","project":"House Chores","elapsed" :5456099," id" :"0a4a79cb-bN 

@6d-4cb1-883d-549a1ie3b66d7"},{"title":"Clear paper jam","project":"0ffice Chores","e\ 

lapsed":1273998, "id":"a73c1d19-f32d-4aff-b470-cea4e792466a"},{"title":"Ponder origin\ 

s of universe","project":"Life Chores","id":"2c433066e-5b44-4ff8-8753-33c35adbd66f","\ 

elapsed" :11750, "runningSince":"1456225941911"}] 

可 以 通过 向 /api/timers/start 端点 发 出 PUT 请 求 来 启动 其 中 一 个 计时 器 。 需 要 发 送 这 个 计时 器 
的 id 和 start 时 间 戳 作为 参数 : 


$ curl -X POST \ 

-H 'Content-Type: application/json' \ 

-d '{"start":1456468632194,"id":"a73c1d19-f32d-4aff-b470-cea4e792406a"}' \\ 
localhost:30600/api/timers/start 


-H 标志 为 HTTP 请 求 设 置 了 标 头 Content-Type。 这 里 通知 服务 器 请 求 的 主体 是 JSON。 
-d 标志 用 于 设置 请 求 的 主体 。 在 单 引 号 '' 内 是 JSON 数据 。 


当 我 们 按 回 车 键 时 , curl 会 快速 返回 而 不 输出 任何 内 容 。 请求 此 端点 成 功 时 服务 器 不 会 返回 任何 
内 容 。 如 果 我 们 打开 data. json 文件 ， 就 会 看 到 之 前 指定 的 计时 器 现在 有 了 runningSince 属性 ， 并 
已 设置 为 我 们 在 请 求 中 指定 的 start 值 。 
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如 果 你 愿意 , 也 可 以 尝试 使 用 其 他 端点 来 了 解 它们 的 工作 方式 。 只 需 确 保 使 用 -x 来 设置 适当 的 方 
法 ， 并 为 写 入 端点 传递 JSON Content-Type。 


我 们 编写 了 一 个 小 型 库 ( 名 为 client )， 来 帮助 你 在 JavaScript 中 与 API 进行 交互 。 


@ 请 注意 ， 上 面 的 反 斜 杠 \ 仅 用 于 断 开 多 行 命令 以 提高 可 读 性 。 它 仅 适 用 于 macOS 和 
Linux，Windows 用 户 只 能 输入 一 个 长 字符 串 。 




















工具 提示 : jq 

对 于 macOS 和 Linux 用 户 :如 果 你 要 在 命令 行 上 解析 和 处 理 JSON ,我 们 强烈 推荐 使 用 jq 工具 。 
你 可 以 用 管道 将 curl 响应 直接 传送 给 jd， 使 得 响应 的 格式 更 美观 : 

curl -X GET localhost:3000/api/timers | jq '.' 


还 可 以 对 JSON 进行 一 些 强大 的 操作 ， 例 如 遍历 响应 中 的 所 有 对 象 并 返回 特定 字段 。 在 这 个 例 
子 中 ， 我 们 只 提取 了 数组 中 每 个 对 象 的 id 属性 : 


curl -X GET localhost:3006/api/timers | jq '.[] | { id }' 











3.5 ”从 服务 器 加 载 状态 


现在 已 通过 硬 编码 JavaScript 对 象 ( 计时 髓 数组 ) 在 TimersDashboard 组 件 中 设置 了 初始 状态 ， 
下 面 修改 这 个 函数 并 换 成 从 服务 器 加 载 数据 。 


我 们 已 编写 了 client 客户 端 库 ， 且 React 应 用 程序 将 使 用 它 与 服务 器 交互 。 该 库 在 public/js/ 
client.js 中 定义 。 我 们 会 先 使 用 它 ， 然 后 在 下 一 节 中 再 看 它 是 如 何 工作 的 。 


GET /api/timers 端点 提供 了 所 有 计时 器 的 列表 ， 如 data. json 中 所 示 。 可 以 在 React 应 用 程序 
中 使 用 cl ient .getTimers( ) 方 法 调用 此 端点 .这样 做 是 为 了 给 TimersDashboard 组 件 保存 的 状态 “ 补 
充 水 分 ”( 从 服务 器 加 载 状态 )。 


当 我 们 调用 client .getTimers( ) 方 法 时 ， 网 络 请 求 是 异步 进行 的 。 被 调用 的 函数 本 身 不 会 返回 
任何 有 用 的 值 : 

// 错误 的 做 法 

// getTimers( ) 方 法 不 会 返回 计时 器 列表 

const timers = client.getTimers( ) 

不 过 可 以 向 getTimers( ) 方 法 传递 一 个 成 功 函数 。 如 果 服 务 器 成 功 返 回 结果 ，getTimers( ) 方 法 
将 在 服务 器 返回 消息 后 调用 该 函数 。getTimers( ) 方 法 会 用 一 个 参数 调用 该 函数 ， 该 参数 则 是 服务 器 
返回 的 计时 器 列表 : 

// 给 getTimers() 方 法 传递 一 个 成 功 函数 


client.getTimers((serverTimers) => ( 
// 用 计时 器 数组 serverTimers 做 一 些 事情 
); 
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client.getTimers() 方 法 使 用 了 Fetch API， 下 一 节 会 介绍 。 就 我 们 的 目的 而 言 ， 
@ 需要 知道 的 重要 一 点 是 ， 当 调用 getTimers() 方 法 时 ， 它 会 向 服务 器 发 出 请 求 ， 然 

后 立即 返回 控制 流 。 程 序 的 执行 不 会 等 待 服务 器 的 响应 ， 这 就 是 getTimers( ) 被 称 

为 异步 函数 的 原因 。 

我 们 传递 给 getTimers() 的 成 功 函 数 称 为 回调 。 也 可 以 这 么 说 :“ 当 你 最 终 收 到 服务 

器 的 回复 时 ， 如 果 是 成 功 的 响应 ， 则 调用 该 函数 。” 这 种 异步 范式 可 确保 JavaScript 

的 执行 不 会 被 1O 阻塞 。 








我 们 会 初始 化 组 件 的 状态 ， 并 将 timers 属性 设置 为 空 数组 。 这 将 允许 所 有 组 件 挂 载 并 执行 它们 
的 初始 泻 染 。 然 后 ， 可 以 通过 向 服务 器 发 出 请 求 并 设置 状态 来 填充 应 用 程序 ; 
time_tracking app/public/js/app-8.js 





class TimersDashboard extends React.Component { 
state = { 
timers: [], 


> 


componentDidMount() { 
this.1oadTimersFromServer(); 
setInterval(this.1loadTimersFromServer, 5000); 


} 


loadTimersFromServer = () => { 
client.getTimers((serverTimers) => (人 
this.setState({ timers: serverTimers }) 





下 面 的 时 间 线 是 最 好 的 媒介 之 一 来 说 明 实 际 发 生 了 什么 。 

(1) 在 初始 泻 染 之 前 

React 初始 化 组 件 时 ，state 被 设置 为 具有 timers 属性 的 对 象 ， 它 返回 一 个 空 数组 。 

(2) 初始 泻 染 

然后 React 在 TimersDashboard 组 件 上 调用 render() 方 法 。 为 了 完成 泻 染 ， 它 的 两 个 子 组 件 
EditableTimerList 和 ToggleableTimerForm 必须 要 演 染 。 

(3) 子 组 件 被 演 染 

EditableTimerList 组 件 调 用 了 它 的 render() 方 法 。 因为 它 传递 的 是 一 个 空白 数据 的 数组 , 所 以 
它 只 生成 如 下 的 HIML 输出 : 


<div id='timers'> 
</div> 








ToggleableTimerForm 组 件 也 会 演 染 它 的 HTML， 即 “+” 按 钮 。 
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(4) 初始 泻 染 完成 

泻 染 完 子 组 件 后 ，TimersDashboard 组 件 的 初始 泻 染 就 完成 了 ，HTML 会 写 人 DOM 中 。 

(5) 调用 componentDidMount( ) 方 法 

现在 已 挂 载 了 组 件 ，TimersDashboard 组 件 会 调用 componentDidMount() 方 法 。 

此 方法 调用 了 loadTimersFromServer( ) 国 数 , 该 函数 接着 调用 client .getTimers() 方 法 。 这 会 
向 服务 器 发 出 HTTP 请 求 ， 以 请 求 计 时 需 列 表 。 当 client 收 到 回复 时 ， 它 会 调用 成 功 函 数 。 

在 调用 时 ， 成 功 函 数 传 递 一 个 参数 serverTimers ， 这 是 服务 器 返回 的 计时 器 数组 。 然 后 调用 
setState() 方 法 ， 这 将 触发 一 个 新 的 泻 染 。 新 的 泻 染 使 用 EditableTimer 子 组 件 及 其 所 有 子 组 件 来 
填充 应 用 程序 。 至 此 ， 应 用 程序 已 完全 加 载 ， 并 以 用 户 无 感知 的 速度 运行 。 

我 们 还 在 componentDidMount( ) 方 法 中 做 了 另外 一 件 有 趣 的 事情 。 我 们 使 用 setInterval( ) 方 法 
来 确保 每 5 秒 调用 一 次 loadTimersFromServer() 方 法 。 虽 然 我 们 会 尽 最 大 努力 在 客户 端 和 服务 器 之 
间 反 映 状态 的 变化 ,但 服务 器 的 这 种 状态 硬 刷新 将 确保 状态 从 服务 器 向 客户 端 转移 时 始终 正确 。 

服务 器 被 视 为 state 的 主要 持 有 者 ， 客 户 端 仅仅 是 一 个 复制 。 这 在 多 实例 场景 中 变 得 异常 强大 。 
如 果 应 用 程序 的 两 个 实例 运行 在 两 个 不 同 的 选项 卡 或 两 个 不 同 的 计算 机 上 ， 其 中 一 个 的 更 改 会 在 5 秒 
内 推送 到 男 一 个 。 

试 试看 

现在 让 我 们 玩 得 开心 点 。 保 存 app. js 并 重新 加 载 应 用 程序 ， 应 该 可 以 看 到 一 个 由 data. json 了 豫 
动 的 全 新 计时 需 列 表 。 你 采取 的 任何 操作 都 会 在 $ 秒 钟 内 消失 。 客 户 端的 状态 每 $ 秒 从 服务 器 恢复 数 
据 。 例 如 ， 尝 试 删除 计时 器， 并 见证 它 弹 性 恢复 而 不 受 影响 。 因 为 我 们 没有 告诉 服务 器 发 生 了 这 些 动 
作 ， 所 以 它 的 状态 保持 不 变 。 

男 一 方面 ， 可 以 尝试 修改 data. json。 请 注意 ,对 data. json 的 任何 修改 都 将 在 5 秒 内 传播 到 应 
用 程序 。 妙 。 

我 们 正在 从 服务 器 加 载 初始 状态 ， 且 有 一 个 间隔 函数 来 确保 在 多 实例 场景 中 客户 端 应 用 程序 的 状 
态 不 会 偏离 服务 器 的 状态 。 

我 们 需要 通知 服务 器 其 余 的 状态 变化 : 创建 、 更 新 ( 包括 启动 和 停止 ) 和 删除 。 但 让 我 们 先 打开 
client 背后 的 逻辑 ， 看 看 它 是 如 何 工 作 的 。 

虽然 服务 器 的 数据 更 改 能 无 终 地 传递 到 视图 确实 很 巧妙 ， 但 在 某 些 应 用 程序 ( 如 消 
@ 息 传递 ) 中 ，5 秒 是 非常 长 的 。 我 们 将 在 未 来 的 应 用 程序 中 介绍 长 轮 询 的 概念 。 长 
轮 询 使 变化 能 够 立即 推送 到 客户 端 。 






















































































































































































3.6 client 





如 果 你 打开 client. js， 在 库 中 定义 的 第 一 个 方法 就 是 getTimers( ) : 
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time_tracking app/public/js/client.js 





function getTimers(success) { 
return fetch('/api/timers', { 
headers: { 

Accept: 'application/json', 
.then(checkStatus) 
.then(parseJSON) 
.then(success); 


}) 


} 























我 们 使 用 新 的 Fetch API 来 执行 所 有 HTTP 请 求 。 如 果 你 曾经 使 用 过 XMLHttpRequest 或 jQuery 
的 ajax() 方 法 ， 那 么 Fetch 的 接口 应 该 看 起 来 比较 熟悉 。 


Fetch 


在 Fetch 之 前 ，JavaScript 开发 人 员 有 两 种 发 起 Web 请 求 的 选择 : 使 用 所 有 浏览 需 原 生 支 持 的 
XMLHttpRequest 或 导入 一 个 库 ， 该 库 提 供 了 XMLHttpRequest 的 包装 (如 jQuery 的 ajax() )。Fetch 
提供 了 比 XMLHttpRequest 更 好 的 接口 。 虽 然 Fetch 仍 在 进行 标准 化 ， 但 它 已 得 到 了 一 些 主流 浏览 器 
的 支持 。 在 撰写 本 书 时 ，Firefox 39 及 以 上 版 本 和 Chrome 42 及 以 上 版 本 会 默认 打开 Fetch。 

在 Fetch 被 浏览 器 广泛 采用 前 ， 为 了 以 防 万 一 ， 最 好 包含 这 个 库 。 我 们 已 在 index.html 中 这 样 做 了 : 


<!-- 在 index.html 的 head 标签 中 --》 
<Script src="vendor/fetch.js"></script> 


可 以 在 client.getTimers() 方 法 中 看 到 ，fetch( ) 方 法 接收 两 个 参数 : 

e 我 们 要 获取 的 资源 的 路 径 ; 

@ 请 求 参数 的 对 象 。 

Fetch 在 默认 情况 下 会 发 出 GET 请 求 ， 因 此 我 们 告诉 Fetch 是 向 /api/timers 端点 发 出 GET 请 求 。 
我 们 还 传递 了 一 个 参数 一 headers， 它 是 请 求 中 的 HITP 标 头 ， 告 诉 服务 器 此 请 求 只 接受 JSON 响应 。 

在 fetch( ) 方 法 调用 的 末尾 附加 了 一 连 串 .then( ) 语 句 : 

time_tracking_ app/public/js/client.js 



























































} ) .then(checkStatus ) 
.then(parseJSON) 
.then(success ) ; 











为 了 理解 这 是 如 何 工 作 的 ， 让 我 们 先 回顾 一 下 传递 给 每 个 .then( ) 语 句 的 函数 。 

@ checkStatus() 函 数 : 此 函数 在 client .js 中 定义 。 它 检查 服务 器 是 否 返回 错误 。 如 果 服 务 器 
返回 错误 ，checkStatus( ) 函数 会 将 错误 记录 到 控制 台 。 

@ parseJSON() 函 数 : 此 函数 也 是 在 client .js 中 定义 的 。 它 接收 fetch( ) 方 法 发 出 的 响应 对 象 

并 返回 一 个 JavaScript 对 象 。 

@ success() 函 数 : 这 是 作为 参数 传递 给 gettimer() 方 法 的 函数 。 如 果 服 务 器 成 功 返 回响 应 ， 
那么 getTimers() 方 法 会 调用 此 函数 。 
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Fetch 返回 一 个 promise。 虽 然 我们 不 会 详细 介绍 promise， 但 可 以 看 到 promise 在 这 里 允许 链 
接 .then( ) 语 句 。 我 们 给 每 个 .then( ) 语 句 传 递 一 个 函数 。 这 里 实际 上 是 说 ;:“ 从 /api/timers 端点 获 
取 计 时 器 数据 ; 然后 检查 服务 器 返回 的 状态 码 ; 之 后 从 响应 中 提取 JavaScript 对 象 ; 最 后 将 该 对 象 传 
递 给 success 子 数 。” 

在 管道 的 每 个 阶段 ， 前 一 个 语句 的 结果 将 作为 参数 传递 给 下 一 个 语句 。 

(1) 当 调 用 checkStatus( ) 函数 时 ， 它 会 传递 fetch( ) 方 法 返回 的 Fetch 响应 对 象 。 

(2) checkStatus() 函数 在 验证 响应 后 ， 返 回 相 同 的 响应 对 象 。 

(3) 调用 parseJSON( ) 函数 并 传递 checkStatus( ) 函数 返回 的 响应 对 象 。 

(4) parseJSON( ) 函数 返回 从 服务 器 返回 的 计时 器 的 JavaScript 数组。 

(5) 使 用 parseJSON( ) 函数 返回 的 计时 器 数组 调用 success( ) 函数 。 

可 以 将 无 数 个 .then( ) 语 句 附 加 到 管道 后 面 。 这 种 模式 使 我 们 能 够 以 一 种 易于 阅读 的 格式 将 多 个 

函数 调用 链接 在 一 起 ， 并 支持 像 fetch( ) 这 样 的 异步 函数 。 

者 如 果 你 仍 不 习惯 promise 的 概念 ， 那 也 没关系 。 我 们 已 为 你 编写 了 本 章 所 有 的 客户 
端 代码 ， 因 此 你 在 完成 本 章 时 不 会 遇 到 问题 。 之 后 你 可 以 再 回来 体验 一 下 
client.js， 并 了 解 它 是 如 何 工 作 的 。 

你 可 以 在 这 里 阅读 更 多 关于 JavaScript 的 Fetch "以 及 promise 的 内 容 。 


查看 client .js 中 的 其 余 函 数 , 你 会 注意 到 这 些 方法 包含 许多 相同 的 样板 代码 , 只 是 基于 调用 的 
API 端点 而 存在 很 小 的 差异 。 

我 们 刚刚 看 了 getTimers( ) 方 法 ， 它 演示 了 从 服务 器 读 取 数 据 的 过 程 。 我 们 将 再 看 一 个 写 入 服务 
佛 的 函数 。 

startTimer() 方 法 向 /api/timers/start 端点 发 出 PoST 请 求 。 服 务 器 需要 计时 器 的 id 和 开始 时 
间作 为 请 求 数据 。 该 请 求 方法 如 下 所 示 : 


time_tracking _app/public/js/client.js 
























































function startTimer(data) { 
return fetch('/api/timers/start', { 
method: 'post', 
body: JSON.stringify(data), 
headers: { 
'Accept': 'application/json', 
'Content-Type': 'application/json', 


}) .then(checkStatus ) ; 
} 


除了 headers 之 外 ， 我 们 传递 给 fetch( ) 方 法 的 请 求 参数 对 象 还 有 两 个 属性 : 








参见 MDM 文档“Fetch API”。 
@) 参见 MDM 文档 “Promise”。 
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time_tracking_app/public/js/client.js 





method: 'post', 
body: JSON.stringify(data), 





它们 如 下 所 示 。 

e method: HTTP 请 求 方法 。fetch( ) 方 法 默认 是 GET 请 求 ， 因 此 这 里 指定 了 一 个 PoST 方法 。 

e@ body: HTTP 请 求 的 主体 ， 是 我 们 发 送 到 服务 器 的 数据 。 

startTimer( ) 方 法 需要 data 参数 。 该 参数 是 将 要 在 请 求 体 中 发 送 的 对 象 , 包含 id 属性 和 start 
属性 。 调 用 startTimer( ) 方 法 可 能 如 下 所 示 : 

// 调用 startTimer() 方 法 的 例子 


startTimer( 


{ 
id: "bc5ea63b-9a21-4233-8a76-f4bca9d0a042"， 


start: 1455584369113, 






































} 
2 
在 这 个 例子 中 ， 我 们 向 服务 器 发 出 的 请 求 体 是 这 样 的 : 


{ 
"id": "bc5ea63b-9a21-4233-8a76-f4bca9d0a042" ， 


"start": 1455584369113 
} 


服务 器 将 从 请 求 体 中 提取 id 和 start 时 间 稚 并 “启动 ”计时 器 。 

我 们 没有 给 startTimers( ) 方 法 传递 成 功 函 数 。 应 用 程序 不 需要 服务 器 提供 此 请 求 的 数据 ， 实 际 
上 服务 器 除了 返回 “OK” 之 外 不 会 返回 其 他 任何 内 容 。 

getTimers( ) 方 法 是 唯一 的 读 操 作 ， 因 此 也 是 我 们 传递 成 功 函 数 的 唯一 操作 。 我 们 对 服务 器 的 其 
余 调 用 是 写 操 作 。 让 我 们 现在 就 实现 它们 。 






























































3.7 ”向 服务 器 发 送 开 始 和 停止 请 3 


可 以 使 用 client 库 中 的 startTimer() 和 stopTimer() 方 法 来 调用 服务 器 上 相应 的 端点 。 只 需要 
传人 一 个 包含 计时 需 id 以 及 启动 /停止 计时 器 的 对 象 即 可 : 
time_tracking app/public/js/app-9.js 




















// 在 TimersDashboard 组 件 内 

pe ee 

startTimer = (timerId) => { 
const now = Date.now(); 


this.setState({ 
timers: this.state.timers.map((timer) => { 
if (timer.id === timerId) { 
return Object.assign({}, timer, { 
runningSince: now, 
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}); 
} else { 
return timer; 
} 
}), 
}); 


client.startTimer( 
{ id: timerId, start: now } 
); 
}; 


stopTimer = (timerId) => { 
const now = Date.now(); 


this.setState({ 
timers: this.state.timers.map((timer) => { 
if (timer.id === timerId) { 
const lastElapsed = now - timer.runningSince; 
return Object.assign({}, timer, { 
elapsed: timer.elapsed + lastElapsed, 
runningSince: null, 
] 
} else { 
return timer; 
} 
上 
}); 


client.stopTimer( 
{ id: timerIld, stop: now } 
); 
}; 


render() { 











你 可 能 会 问 : 为 什么 仍 在 React 中 手动 更 改 状态 ?能 不 能 只 通知 服务 器 需要 采取 的 操作 ,然后 根 
据 服务 器 (真实 数据 的 来 源 ) 来 更 新 状态 ? 实际 上 ， 以 F 实 现 是 有 效 的 


startTimer: function(timerId) { 
const now = Date.now(); 

















client.startTimer( 
{ id: timerIld, start: now } 
) .then(loadTimersFromServer ) ; 


}, 
可 以 将 .then() 链 接 到 startTimer() 函数 后 面 ， 因 为 该 函数 返回 原始 的 Promise 对 象 。 
startTimer( ) 管 道 的 最 后 一 个 阶段 是 调用 loadTimersFromServer( ) 函 数 。 因 此 ， 在 服务 器 处 理 完 局 


动 计时 器 请 求 后 ， 我 们 会 立即 发 出 后 续 的 请 求 来 获取 最 新 的 计时 器 列表 。 这 个 响应 会 包含 当前 正在 运 
行 的 计时 喜 中 。 然 后 ，React 的 状态 更 新 和 这 个 正在 运行 的 计时 顺 将 反映 在 UI 中。 
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同样 ， 上 面 这 样 做 是 有 效 的 ， 但 用 户 的 体验 会 有 一 些 不 足 之 处 。 不 过 我 们 现在 点 击 startstop ( 开 
始 或 停止 ) 按 包 就 能 提供 即时 反馈 ， 央 为 状态 在 本 地 更 改 且 React 会 立即 重新 泻 染 。 如 果 我 们 等 待 服 
务 器 回复 ， 则 操作 ( 鼠标 点 击 ) 和 响应 ( 计时 器 开始 运行 ) 之 间 可 能 会 有 明显 的 延迟 。 你 可 以 在 本 地 
尝试 ， 但 如 果 发 出 请 求 必须 通过 互联 网 ， 那 么 延迟 是 最 明显 的 。 

我 们 在 这 里 做 的 是 乐观 更 新 。 在 等 待 服务 器 的 回复 之 前 ,我 们 在 本 地 更 新 客户 端 。 这 会 导致 状态 
更 新 工作 重复 ,因为 在 客户 端 和 服务 器 上 都 执行 了 更 新 。 但 这 样 做 可 以 使 应 用 程序 尽 可 能 地 响应 用 户 
操作 。 


用 这 里 的 “乐观 ”是 指 假定 请 求 会 成 功 ， 不 会 出 现 错误 。 


















































使 用 与 启动 和 停止 相同 的 模式 ,看 看 你 是 否 可 以 自己 实现 创建 、 更 新 和 删除 请 求 。 然 后 回来 把 你 
的 工作 与 下 一 节 进 行 比较 。 

















乐观 更 新 : 需要 验证 

每 当 使 用 乐观 更 新 时 ， 我 们 总 是 试图 复制 服务 器 可 能 具有 的 任何 限制 。 这 样 我 们 客户 端 才能 与 
服务 器 在 相同 的 条 件 下 更 改 状态 。 

例如 ， 想象 服务 器 强制 计时 器 的 标题 不 能 包含 符号 ,但 客户 端 没有 强制 执行 这 样 的 限制 。 那 会 
发 生 什 么 呢 ? 

如 果 用 户 有 一 个 名 为 Gardening 的 计时 器 。 他 觉得 有 点 不 合适 ， 于 是 把 它 重 命名 为 
Gardening :P。UI 立 即 反 映 了 他 的 更 改 ， 并 显示 Gardening :P 作为 该 计时 器 的 新 名 称 。 用 户 很 满 
意 ， 他 正 要 站 起 来 拿 起 剪刀 。 可 是 等 一 下 ! 他 的 计时 器 名 称 突然 跳 回 Gardening。 

为 了 成 功 实现 用 户 希 望 得 到 的 更 新 ， 我 们 必须 努力 复制 客户 端 和 服务 器 上 管理 状态 变化 的 代 
码 。 此 外 ， 在 生产 应 用 程序 中 ， 如 果 请 求 服务 器 时 由 于 代码 不 一 致 或 其 他 一 些 意外 情况 ( 如 服务 器 
关闭 ) 导致 了 任何 错误 ， 则 应 该 将 它们 显示 出 来 。 
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time_tracking_app/public/js/app-complete.js 


// 在 TimersDashboard 组 件 内 
yt 
createTimer = (timer) => { 
const t = helpers.newTimer(timer); 
this.setState({ 
timers: this.state.timers.concat(t), 


] ) ; 





client.createTimer(t); 


3 


updateTimer = (attrs) => { 
this.setState({ 
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timers: this.state.timers.map((timer) => { 
if (timer.id === attrs.id) { 
return Object.assign({}, timer, { 
title: attrs.title, 
project: attrs.project, 
上 
} else { 
return timer; 


}), 
} 


client.updateTimer(attrs); 


| 


deleteTimer = (timerId) => { 
this.setState({ 
timers: this.state.timers.filter(t => 七 .id !== timerId), 


上 


client.deleteTimer( 
{ id: timerId } 
); 
中 


startTimer = (timerId) => { 





回想 一 下 ,在 createTimer() 和 updateTimer( ) 子 数 中 ,timer 和 attrs 对 象 分 别 包含 一 个 服务 
器 要 求 的 id 属性 。 

对 于 创建 请 求 , 需 要 发 送 一 个 完整 的 计时 器 对 象 , 它 应 该 包含 一 个 id 一 个 title 和 一 个 project。 
对 于 更 新 请 求 ， 可 以 发 送 一 个 iq 以 及 需要 更 新 的 任何 属性 。 现 在 无 论 发 生 什么 变化 ， 我 们 总 是 发 送 
title 和 project 属性 。 但 值得 注意 的 是 这 其 中 的 差异 , 它 反映 在 我 们 正在 使 用 的 变量 名 称 中 (timer 
或 者 attrs )。 















































运行 一 下 
我 们 现在 已 会 把 所 有 状态 的 变化 都 发 送 到 服务 器 。 保 存 app .js 并 重新 加 载 应 用 程序 。 添 加 并 启 


动 一 些 计 时 器 ， 然 后 刷新 ， 要 注意 这 些 操 作 都 是 持久 化 的 。 甚 至 可 以 在 一 个 浏览 器 的 选项 卡 中 对 应 用 
程序 进行 更 改 ， 然 后 可 以 看 到 变化 已 传递 到 另 一 个 选项 卡 中 。 














3.9 下 一 步 
我 们 已 通过 可 重用 的 方法 来 构建 React 应 用 程序 ， 且 现在 已 了 解 了 如 何 将 React 应 用 程序 连接 到 
Web 服务 器 。 有 了 这 些 概念 ， 你 就 可 以 构建 各 种 动态 Web 应 用 程序 了 。 


接 下 来 的 几 章 将 介绍 在 Web 上 遇 到 的 各 种 不 同 的 组 件 类 型 ( 如 表单 和 日 期 选择 右 )， 还 会 探索 更 
复杂 的 应 用 程序 的 状态 管理 范式 。 

















































































































JSX 和 虚拟 DOM 








4.1 React 使 用 了 虚拟 DOM 


React 的 工作 方式 与 许多 早期 的 前 端 JavaScript 框架 不 同 ， 它 没有 使 用 浏览 器 的 DOM ， 而 是 构建 
了 DOM 的 虚拟 表示 。 所 谓 虚拟 , 指 的 是 表示 “实际 的 DOM” 的 JavaScript 对象 树 。 稍 后 会 详细 介绍 。 

在 React 中 ， 我 们 不 直接 操作 实际 的 DOM ， 而 是 必须 操作 虚拟 DOM， 并 让 React 负责 更 改 浏览 
器 的 DOM。 

本 章 我 们 将 看 到 ， 这 是 一 个 非常 强大 的 功能 ， 但 它 要 求 我 们 从 不 同 的 角度 来 思考 如 何 构建 Web 
应 用 程序 。 



































4.2 为 什么 不 修改 实际 的 DOM 


这 值得 一 问 : 为 什么 需要 虚拟 DOM? 难道 不 能 只 使 用 “实际 的 DOM” 吗 ? 

当 进 行 “ 经 典 ”( 例如 jQuery ) 风格 的 Web 开发 时 ， 我 们 通常 会 这 样 做 : 

(1) 查找 一 个 元 素 (使 用 document .querySelector 或 document .getElementById ); 

(2) 直接 修改 该 元 素 ( 例如 通过 在 元 素 上 设置 . innerHTML )。 

这 种 开发 方式 存在 以 下 问题 。 

@ 很 难 跟 踪 变 化 : 跟踪 DOM 的 当前 ( 和 先前 ) 状态 以 将 其 操作 为 需要 的 形式 会 变 得 很 困难 。 

@ 它 可 能 会 很 慢 : 修改 实际 的 DOM 是 一 个 代价 高 昂 的 操作 ， 且 在 每 次 变化 时 都 修改 DOM 会 导 
致 性 能 显著 下 降 。 



















































































4.3 什么 是 虚拟 DOM 


创建 虚拟 DOM 是 为 了 解决 上 面 的 问题 ， 但 究竟 什么 是 虚拟 DOM 昵 ? 
虚拟 DOM 指 的 是 表示 实际 的 DOM 的 JavaScript 对 象 树 。 


使 用 虚拟 DOM 的 其 中 一 个 有 趣 的 原因 是 它 提供 的 API。 当 使 用 虚拟 DOM 编码 时 ， 就 好 像 每 次 
更 新 都 需要 重新 创建 整个 DOM 一样。 
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这 种 重新 创建 整个 DOM 的 想法 产生 了 一 个 易于 理解 的 开发 模型 : 开发 人 员 只 需 返 回 他 们 希望 看 
到 的 DOM， 而 不 是 跟踪 所 有 DOM 的 状态 变化 。React 负责 幕后 的 转换 工作 。 
这 种 在 每 次 更 新 时 都 重新 创建 虚拟 DOM 的 想法 可 能 听 起 来 像 个 坏 主意 : 它 不 会 变 慢 吗 ? 事实 上 ， 
React 的 虚拟 DOM 实现 带 来 了 重要 的 性 能 优化 ， 使 其 变 得 非常 快 。 
虚拟 DOM 的 实现 如 下 : 
@ 使 用 高 效 的 差异 算法 ， 以 了 解 发 生 了 哪些 变化 ; 














@ 会 同时 更 新 DOM 的 子 树 ; 
e@ 批量 更 新 DOM。 


所 有 这 


4.4 虚 


同样 ， 在 React 中 构建 Web 应 用 程序 时 ， 我 们 不 是 直接 使 用 浏览 器 中 的 “实际 的 DOM”， 而 是 使 


用 它 的 虚拟 
对 象 。 


但 这 个 


























些 都 为 构建 Web 应 用 程序 提供 了 一 个 优化 的 且 易 于 使 用 的 方法 。 


拟 DOM 片段 



























































表示 。 我 们 的 工作 是 为 React 提 供 足 够 的 信息 来 构建 一 个 代表 浏览 器 泻 染 内 容 的 JavaScript 











虚拟 DOM 的 JavaScript 对 象 实际 上 包含 了 什么 呢 ? 


React 的 虚拟 DOM 是 一 个 由 ReactElement 组 成 的 树 。 


通过 一 
多 ,下 面 会 


名 














4.5 Re 


ReactE 


些 示 例 来 理解 虚拟 DOM 、ReactElement 以 及 它们 如 何 与 “实际 的 DOM” 交 互 会 容易 得 
进行 说 明 。 
问 : 虚拟 DOM 和 影子 DOM 是 一 回 事 吗 ? 〈 答 : 不 是 。) 
也 许 你 已 听 说 过 “影子 DOM”， 并 想 知道 影子 DOM 与 虚拟 DOM 是 否 相同 。 答 案 
是 不 相同 。 
虚拟 DOM 指 的 是 表示 真实 DOM 的 JavaScript 对 象 树 。 
影子 DOM 是 对 元 素 进 行 封装 的 一 种 形式 。 想 想 在 你 的 浏览 器 中 使 用 cvideo、 标 签 。 
在 video 标签 中 ,浏览 器 会 创建 一 组 视频 控件 ， 例 如 播放 按钮 、 时 间 码 编号 、 滑 块 
进度 条 等 。 这 些 元 素 不 属于 “常规 的 DOM”， 却 是 “影子 DOM” 的 一 部 分 。 
本 章 不 会 讨论 影子 DOM, 但 如 果 你 想 了 解 更 多 有 关 影 子 DOM 的 信息 , 请 阅读 文章 
“Introduction to Shadow DOM” 。 


actElement 





lement 是 虚拟 DOM 中 对 DOM 元 素 的 表示 。 

















React 会 采用 这 些 ReactElement 并 将 它们 放 入 “实际 的 DOM” 中 。 
要 对 ReactElement 有 一 个 直观 的 认识 ， 最 好 的 方法 就 是 在 浏览 器 中 尝试 一 下 。 
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4.5.1 ”尝试 使 用 ReactElement 


2 在 浏览 器 中 尝试 
本 节 请 在 浏览 器 中 打开 代码 文件 /jsx/basic/index.html (在 已 下 载 的 代码 库 中 )。 
然后 打开 开发 者 控制 台 并 在 其 中 输入 命令 。 你 可 以 通过 点 击 和 鼠标 右键 并 选择 
“Inspect”( 检查 ) 来 打开 检查 器 ， 然 后 点 击 检查 器 中 的 “Console”( 控制 人 台 ) 来 访 


问 Chrome 的 控制 台 ， 见 图 4-1。 
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图 4-1 基本 的 控制 台 界面 
我 们 首先 使 用 一 个 简单 的 HTML 模板 ( 见 图 4-2 )， 它 包含 一 个 带 有 id 标签 的 <qivy 元 素 : 


<div id='root' /> 
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图 4-2 根 元 素 
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证 我 们 看 看 如 何在 〈 实际 的 ) DOM 中 使 用 React 演 染 cb></b> 标 签 。 当 然 ， 我们 不 打算 直接 在 





DOM 中 创建 (b> 标签 ( 就 像 使 用 类 似 jQuery 的 库 时 那样 )。 











相反 ，React 希 望 我 们 提供 一 个 虚拟 DOM 树 。 也 就 是 说 ， 我 们 会 给 React 提供 

















象 ，React 会 把 它们 变 成 一 个 真正 的 DOM 树 。 





组 JavaScript 对 


组 成 树 的 对 象 是 ReactElement 。 要 创建 ReactElement , 我 们 需要 使 用 React 提供 的 createElement() 


方法 。 
例如 ， 要 在 React 中 创 妈 
入 以 下 内 容 ( 见 图 4-3 ): 


var boldElement = React.createElement('b'); 








人 中 
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一 个 表示 <b、( 粗 体 ) 元 素 的 ReactElement ,需要 在 浏览 融 控 制 台 中 输 
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var boldElement = React,createELement('b'); 
undefined 
» boldElement 
Object {$$typeof: Symbol(react.element), type: 
V key: null, ref: null, props: Object..} 
$$typeof: Symbol(react.element) 
_owner: null 
_self: null 
Source null 
* _store: Object 
key: null 
pb props: Object 
ref: null 
type: "b" 
Pb__proto_: Object 


mp", 


X 





图 4-3 ”boldElement 是 一 个 ReactElement 





上 面 的 boldElement 是 ReactElement 的 一 个 实例 。 虽 然 现 在 已 有 了 boldElement ， 但 它 如 果 没 











有 被 React 演 染 到 实际 的 DOM 树 中 ， 就 是 不 可 见 的 。 


4.5.2 ” 泻 染 ReactElement 


本 ReactElement 演 染 到 实际 的 DOM 树 中 ， 我 们 需要 使 用 ReactDOM.render() 方 法 (本 章 


会 详细 介绍 )。ReactDOM.render() 方 法 需要 两 个 参数 : 
(1) 虚拟 树 的 根 节 点 
(2) 我 们 希望 React 写 人 实际 济 览 嚣 DOM 中 的 挂 载 位 置 。 
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在 这 个 简单 模板 中 ， 我 们 希望 能 够 访问 id 为 root 的 div 标签 。 要 获得 实际 DOM 的 root 元 素 
的 引用 ， 可 以 使 用 以 下 任何 一 种 方法 : 


// 这 两 种 方法 都 可 以 
var mountElement = document .getElementById('root'); 
var mountElement = document.querySelector( '#root'); 


// 如 果 我 们 使 用 了 jQuery， 下 面 这 种 方法 也 可 以 


var mountElement = $('#root') 


通过 从 DOM 中 检索 到 的 mountElement , 可 以 给 React 提供 一 个 点 来 插入 它 需 要 演 染 的 DOM( 见 
图 4-4 ): 


var boldElement = React.createElement('b'); 

var mountElement = document .querySelector( '#root'); 
// 在 DOM 树 中 泻 染 boldElement 
ReactDOM.render(boldElement, mountElement); 
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var boldElement = React,createElement('b'); 
undefined 


var mountElement = document,.querySelector( '#root'); 


undefined 
ReactDOM. render (boldE\ement, mountElement); 
<b data-reactroot></b> 


> | 








图 4-4 一 个 可 插入 React 需 要 演 染 的 DOM 的 点 
虽然 DOM 中 没有 出 现任 何 内 容 , 但 有 一 个 新 的 空 元 素 作 为 mountElement 的 子 级 已 插入 文档 中 。 


如 果 我 们 点 击 Chrome 检查 器 中 的 “Element”( 元 素 ) 选项 卡 ， 可 以 看 到 b 标签 已 在 
实际 的 DOM 中 创建 好 了 。 
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4.5.3 ”使 用 子 元 素来 添加 文本 


虽然 现在 DOM 中 已 有 了 一 个 b 标签 ， 但 如 果 我 们 可 以 在 标签 中 添加 一 些 文本 就 好 了 。 因 为 文本 
位 于 b 标签 的 开始 和 结束 的 标签 之 间 ， 所 以 添加 文本 就 是 创建 该 元 素 的 子 元 素 。 

上 面 使 用 的 React .createElement 函数 只 有 一 个 参数 ( 'b' 表 示 b 标签 ), 然而 React .createElement() 
函数 可 以 接收 三 个 参数 : 

(1) DOM 元 素 类 型 ; 

(2) 元 素 的 props ( 属性 ); 

(3) 元 素 的 子 元 素 。 

本 节 稍 后 会 详细 介绍 props ， 现 在 先 将 此 参数 设置 为 null。 

DOM 元 素 的 子 元 素 必 须 是 ReactNode 对 象 ， 它 可 以 是 以 下 任何 一 种 : 

(1) ReactElement ; 

(2) 字符 串 或 数字 ( ReactText 对 象 ); 

(3) ReactNode 数组 。 

例如 要 将 文本 放 在 boldElement 中 , 我 们 可 以 传递 一 个 字符 串 作 为 上 面 的 createElement( ) 函数 
中 的 第 三 个 参数 ( 见 图 4-5 ): 


var mountElement = document .querySelector( '#Toot ' ) ; 

// 第 三 个 参数 是 内 部 文本 

var boldElement = React.createElement('b', null, "Text (as a string)"); 
ReactDOM.render(boldElement, mountElement); 














四 四 全 ， 门 basicExample x Fullstack React 
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> var mountElement = document.querySelector( '#root'); 
undefined 

> var boldElement = React.createElement('b’', null, "Text 
(as a string)"); 
undefined 

> ReactDOM, render(boldE\ement, mountElement); 
p<b data-reactroot>..</b> 

> 








图 4-5 ”传递 一 个 字符 串 作 为 CreateElement( ) 函数 中 的 第 三 个 参数 
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4.5.4 ReactDOM.render() 


可 以 看 到 ， 我 们 使 用 React 演 染 器 将 虚拟 树 置 于 “真实 的 ”浏览 器 视图 (“实际 的 DOM”) 中 。 

但 React 使 用 自己 的 视图 树 虚 拟 表 示 有 一 个 很 好 的 副作用 : 它 可 以 在 多 种 类 型 的 画布 中 泻 染 这 
个 树 。 

也 就 是 说 , React 不 仅 可 以 泻 染 到 浏览 器 的 DOM 中 , 而 且 还 可 用 于 在 其 他 框架 (如 移动 应 用 程序 ) 
中 泻 染 视 图 。 在 React Native( 本 书后 面 会 讨论 ) 中 ， 该 树 被 演 染 为 原生 移动 视图 。 

本 节 大 部 分 时 间 会 花 在 DOM 上 ,因此 我 们 将 使 用 ReactDoM 泻 染 器 来 管理 浏览 器 DOM 中 的 元 素 。 

如 我 们 所 见 ，ReactDOM .render( ) 函数 就 是 我 们 将 React 应 用 程序 放 人 DOM 的 方式 : 


const component = ReactDOM.render(boldElement, mountElement); 


我 们 可 以 多 次 调用 ReactDoM.render( ) 函数 ， 但 它 只 在 必要 时 对 DOM 中 发 生变 化 的 地 方 执行 
更 新 。 


ReactDOM .render( ) 函数 接收 的 第 三 个 参数 是 在 组 件 泻 染 /更 新 后 执行 的 回调 参数 。 可 以 使 用 此 回 
调 作 为 应 用 程序 启动 后 运行 函数 的 方法 : 
ReactDOM.render(boldElement, mountElement, function() { 
// React 应 用 程序 已 被 演 染 或 更 新 
}); 





























































































































4.6 JSX 


4.6.1 使 用 JSX 创 建 元 素 
前 面 创建 ReactElement 时 使 用 了 React .createElement 也 数 ， 如 下 所 示 : 


var boldElement = React.createElement('b', null, "Text (as a string)"); 

它 工作 得 很 好 ， 因 为 只 有 一 个 小 组 件 ， 但 是 如 果 有 很 多 山 套 组 件 ， 语 法 可 能 很 快 就 会 变 得 混乱 。 
因为 DOM 是 有 层次 的 ， 所 以 React 组 件 树 也 应 该 是 分 层次 的 。 

可 以 这 样 想 : 为 了 向 浏览 器 描述 页 面 , 我 们 编写 HTML ; 浏览 器 解析 HTML 以 创建 用 于 组 成 DOM 
的 HTML 元 素 。 

HTML 非常 适合 用 来 指定 标签 的 层次 结构 。 使 用 标记 代码 表示 React 组 件 树 会 很 不 错 ， 就 像 我 们 
对 HTML 所 做 的 那样 。 

这 就 是 JSX 背后 的 思想 。 

使 用 JSX 时 ， 它 会 蔡 我 们 处 理 好 创建 ReactElement 对 象 的 工作 。JSX 使 用 了 以 下 的 等 效 结构 语 
法 来 取代 每 个 元 素 都 调用 React .createElement 函数 的 做 法 


var boldElement = <b>Text (as a string)</by> ; 
// =、〉boldElement 现在 是 一 个 ReactElement 
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JSX 解析 器 将 读 取 该 字符 串 并 为 我 们 调用 React .createElement 函数 。 

















JSX 是 JavaScript Syntax Extension 的 缩写 ， 它 是 React 提供 的 语法 ， 看 起 来 非常 像 HTML 或 








XML。 因 此 我 们 不 会 直接 使 用 普通 的 JavaScript 构建 组 件 树 ， 而 是 像 编写 HTML 一 样 编写 组 件 。 



































JSX 提供 了 类 似 于 HTML 的 语法 。 不 过 , 在 JSX 中 我 们 也 可 以 创建 自己 的 标签 ( 它 对 其 他 组 件 的 





功能 进行 在 s )。 














const element = <div>Hello worldc/divy>; 


React 组 件 和 HTML 标签 之 间 的 一 个 区 别 在 于 命名 。 





以 大 写字 母 开 头 。 例 如 : 


// html 标签 
const htmlElement = (<div>Hello world</div; ) ; 


// React 组 件 


虽然 它 的 名 称 听 起 来 很 可 怕 , 但 编写 JSX 并 不 会 比 编写 HTML 难 多 少 。 例 如 下 面 这 个 JSX 组 件 : 


HTML 标签 以 小 写字 母 开 头 ， 而 React 组 件 


const Message = props => (<¢div> {props.text}«</div;) 


// 使 用 带 有 Message 标签 的 React 组 件 


const reactComponent = (<Message text="Hello wor 








d" />»); 





我 们 经 常用 圆 括号 (() ) 包 右 JSX。 虽 然 技术 上 这 并 不 总 是 必需 的 ， 但 它 有 助 于 我 们 区 分 JSX 和 





JavaScript。 





浏览 器 并 不 知道 如 何 读 取 JSX， 那么 JSX 该 如 何 变 成 可 能 呢 ? 





















































在 用 浏览 器 加 载 JSX 之 前 ， 我 们 会 使 用 预 处 理 器 构建 工具 将 它 转换 成 JavaScript。 
当 我 们 编写 JSX 时 , 需要 将 它 传递 给 一 个 “编译 器 “有 时 我 们 说 代码 被 转译 ), 该 编译 需 会 将 JSX 














转换 为 JavaScript。 最 常见 的 工具 是 babel 插件 ， 稍 后 会 介绍 。 
除了 能 够 编写 类 似 HTML 的 组 件 树 外 ，JSX 还 提供 了 另 一 个 优势 : 我 们 可 以 将 JavaScript 与 JSX 








标记 代码 混合 使 用 。 这 样 就 能 添加 与 视图 内 联 的 逻辑 。 

















本 书 已 多 次 介绍 JSX 的 基本 示例 。 本 节 的 不 同 之 处 在 于 , 我 们 会 更 结构 化 地 了 解 使 用 JSX 的 不 同 
方式 。 我 们 将 介绍 使 用 JSX 的 技巧 ， 然 后 讨论 要 如 何 处 理 一 些 杯 手 的 情况 。 


让 我 们 来 看 : 
子 表达 式 ; 
注释 。 


4.6.2 ”JSX 属 性 表达 式 




















为 了 在 组 件 的 属性 中 使 用 JavaScript 表达 式 ， 我 们 需要 将 它 包 右 在 大 括号 ({} ) 中 ， 而 不 是 使 用 








引号 ("")。 
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ON 
const warningLevel = 'debug'; 
const component = (<Alert 


color={warningLevel === 'debug' ? 'gray' : 'red'} 
log={true} />) 


此 示例 在 color 属性 上 使 用 了 三 元 运算 符 。 








| 


























如 果 warningLevel 变量 的 值 设 置 为 debug ,下 color 属性 的 值 将 是 'gray 灰色 ), 否 则 就 
(红色 )。 


4.6.3 ”JSX 子 条 件 表 达 式 


另 一 种 常见 模式 是 使 用 布尔 检查 表达 式 ， 然 后 根据 条 件 来 泻 染 另 一 个 元 素 。 


例如 ， 如 果 我 们 正在 构建 一 个 显示 管理 员 用 户 选 项 的 菜单 ， 可 以 这 样 写 : 
2 


const renderAdminMenu = function() { 








是 red' 




















让 





return (<MenuLink to="/users">User accounts/MenuLinky>) 
} 
A 


const userLevel = this.props.userLevel,; 
return ( 


«UL> 
<li>Menux</1i> 


{userLevel === 'admin' && renderAdminMenu( )} 
</ul> 


) 
也 可 以 使 用 三 元 运算 符 来 决定 泻 染 哪 一 个 组 件 。 


例如 , 如 果 我 们 想 为 登录 用 户 显示 一 个 <UserMenu> 组 件 
则 可 以 使 用 这 个 表达 式 : 


const Menu = (ul>{loggedInUser ? <UserMenu /> 


4.6.4 JSX 布 尔 属性 


在 HTML 中 ， 某 些 属 性 若 存在 需要 将 该 属性 设置 为 true。 例 如 ， 
素 可 以 这 样 定义 : 


<input name='Name' disabled /> 

















T 





, 为 匿名 用 户 显 示 一 个 <LoginLink> 组 件 ， 


: <LoginLink />}¢</ul>) 




















一 个 禁用 的 cinput> HTML 元 





在 React 中 ， 需 要 将 它们 设置 为 布尔 值 。 也 就 是 说 ， 需 要 显 式 传递 一 个 true 或 false 作为 属 
// 直接 在 括号 中 设置 布尔 值 


<input name='Name' disabled={true} /> 





性 


yy 或 者 使 用 JavaScript 变量 


let formDisabled = true; 
<input name='Name' disabled={formDisabled} /> 


如 果 需 要 启用 上 面 的 input 输入 框 ， 只 需 将 formDisabled 设置 为 false 即 可 。 
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4.6.5 ”JSX 注 释 
可 以 通过 使 用 带 有 注释 分 隔 符 ( /xx/ ) 的 大 括号 ({} ) 来 定义 JSX 内 部 的 注释 : 


let userLevel = 'admin'; 
{/* 
如 果 userLevel 的 值 是 admin， 则 显示 管理 员 菜 单 
*/} 
{userLevel === 'admin' && <AdminMenu />} 


4.6.6 ”JSX 扩 展 语法 

有 时 当 有 许多 属性 传递 给 组 件 时 ， 如 果 单 独 列 出 每 个 属性 可 能 会 很 麻烦 。 幸 运 的 是 ，JSX 有 一 个 
快捷 的 语法 ， 能 使 它 变 得 简单 。 

例如 ， 有 一 个 具有 两 个 键 的 props 对 象 ; 

const props = {msg: "Hello", recipient: "World"} 

可 以 像 下 面 这 样 单独 传递 每 个 属性 : 

<Component msg={"Hello"} recipient={"World"} /> 

但 通过 使 用 JSX 扩展 语法 ,我 们 可 以 换 成 这 样 做 : 


<Component {...props} /> 
《1-- 本 质 上 和 下 面 一 样 : --》 
<Component msg={"Hello"} recipient={"World"} /> 


4.6.7 ”JSX 陷 阱 


[eal 


虽然 JSX 模 仿 了 HTML， 但 仍 有 一 些 重要 的 区 别 需 要 注意 。 
下 面 有 一 些 事项 需要 记 住 。 
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1. JSX 陷阱 : class 和 className 
当 我 们 想 要 设置 HTML 元 素 的 CSS 类 时 ， 通 常会 在 标签 中 使 用 class 属性 : 


<div class='box'> </div> 
































由 于 JSX 与 JavaScript 密切 相关 , 因此 我 们 无 法 使 用 JavaScript 在 标签 的 属性 中 使 用 的 标识 符 。 例 
如 属性 for 和 class 会 与 JavaScript 的 关键 字 for 和 class 冲突 。 
因此 JSX 使 用 className 而 不 是 class 来 标识 类 : 


<!-- 与 <div class='box'></div> 相 同 --》 
<div className='box'> <¢/div> 












































className 属性 的 工作 方式 类 似 于 HTML 中 的 class 属性 。 它 需要 接收 一 个 字符 串 ,该 字符 串 表 
示 与 CSS 类 相关 联 的 类 。 


要 在 JSX 中 传递 多 个 类 ， 我 们 可 以 加 入 一 个 数组 ， 并 将 其 转换 为 字符 串 : 


var cssNames = ['box', 'alert'] 
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// 在 JSX 中 使 用 cssNames 数组 


(x<div className={cssNames. join(' ')}></div») 


2. 提示 : 使 用 classnames 管理 className 


classnames 的 npm 包 是 一 个 很 好 的 扩展 ， 我 们 用 它 来 帮助 管理 CSS 类 。 它 可 以 接收 字符 串 或 对 


象 列表 作为 参数 ， 并 人 允许 我 们 根据 条 件 将 类 应 用 到 元 素 中 。 
classnames 包 可 以 接收 多 个 参数 ,然后 会 将 它们 转换 为 对 象 ， 并 根据 条 件 ( 在 值 为 真 时 ) 把 它们 


应 用 到 CSS 类 中 。 
code/jsx/basic/app.js 


class App extends React.Component { 


render() { 
const klasses = classnames({ 


box: true，// 总 是 应 用 box 类 
alert: this.props.isAlert，// 如 果 属 性 已 经 设置 了 ， 则 使 用 这 个 类 


severity: this.state.onHighAlert，// 根据 状态 判断 
timed: false // 永远 不 使 用 这 个 类 
]) 
return React .createElement( 
“div, 
{className: klasses}, 
React .createElement('hi', {}, 
); 
} 


























'Hello world') 


} 























该 包 中 的 readme 文 档 "为 更 复杂 的 环境 提供 了 备用 示例 。 




















3. JSX 陷阱 : for 和 htmlFor 
出 于 同样 的 原因 我 们 也 不 能 使 用 这 个 class 属性 ， 即 不 能 将 for 属性 应 用 到 <1abel> 元 素 中 。 必 
须 换 成 使 用 htmlFor 属性 。 该 属性 是 一 个 传递 属性 ， 它 会 在 下 面 这 种 情况 下 应 用 该 属性 : 























《1!-- ... ——> 
<label htmlFor='email'>Email</label> 


<input name='email' type='email' /> 
《41-- ,.. ——> 


上 在 妈 夺 口 


4. JSX 陷阱 : HTML 实体 和 表情 符号 
实体 是 HTML 中 的 保留 字符 ， 包 括 小 于 号 (< )、 大 于 号 (、 ) 和 版 权 符 号 等 。 为 了 
以 将 实体 代码 放 在 纯 文字 的 文本 中 。 


<Ul> 
<li>phone: &phone; </1i> 
<li>star: &star;</1i> 
</ul> 


为 了 在 动态 数据 中 显示 实体 ， 需 要 将 它们 包 囊 在 大 括号 〈({} ) 内 的 字符 中 





显示 实体 ， 可 

















中 。 和 预期 的 一 样 直接 



































GD 参见 GitHub 网 站 的 JedWatson/classnames 页 面 。 
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在 JS 中 使 用 Unicode， 就 像 可 以 直接 将 JS 作为 UTF-8 文本 发 送 到 浏览 器 一 样 。 浏 览 器 知道 如 何 原 4 





Mt 


地 显示 UTF-8 代码 。 








或 者 可 以 使 用 Unicode 版 本 来 代替 使 用 实体 字符 代码 。 


return ( 
<U1> 
<1i>phone: {'"Nu0260e'}</1iy> 
<li>star: {'NXu2606'}</1iy> 





























</ul> 
) 
表情 符号 只 是 Unicode 字符 序列 ， 因 此 我 们 可 以 用 同样 的 方式 来 添加 它 〈 见 图 4-6 ): 
return( 
<U1> 
<1li>dolphin: {'\uD83D\uDC2C'}</1i> 
<1li>dolphin: {'\uD83D\uDC2C'}</1i> 
<li>dolphin: {'\uD83D\uDC2C'}«</1i> 
</ul> 
) 
。 dolphin: 与 
。 dolphin: 三 
。 dolphin: 亏 














图 4-6 每 个 人 都 需要 更 多 的 海豚 








5. JSX 陷阱 : data- 
如 果 想 应 用 HTML 规范 没有 涵盖 的 属性 ， 则 必须 在 属性 键 前 面 加 上 字符 串 data-。 


<div className='box' data-dismissible={true} /> 
<span data-highlight={true} /> 


虽然 此 要 求 仅 适用 于 HTML 原生 的 DOM 组 件 , 但 并 不 意味 着 自 定义 组 件 不 能 接受 任意 的 键 作为 


























属性 。 也 就 是 说 ， 可 以 接受 自 定义 组 件 的 任何 属性 : 


下 使 用 我 们 的 网 站 会 很 困难 。 可 以 在 一 个 元 素 上 任意 使 用 这 些 属性 ， 只 需 元 素 的 键 前 面 带 有 字符 串 





<Message dismissible={true} /> 
<Note highlight={true} /> 


有 一 套 标 准 的 Web 可 访问 性 “的 属性 “， 使 用 它们 是 个 好 主意 ， 因 为 有 很 多 人 在 没有 它们 的 情况 


















































aria-。 例 如 要 设置 hidden 属 性 : 








<div aria-hidden={true} /> 





@ 参见 W3C 网 站 的 WAI-ARIA Overview 页 面 。 
人 @) 参见 W3C 网 站 文章 “Accessible Rich Internet Applications (WAI-ARIA) 1.1”。 
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4.6.8 ”JSX 总 结 


JSX 并 不 神奇 ， 关 键 是 要 记 住 JSX 是 用 于 调用 React .createElement 的 语法 糖 。 

JSX 会 解析 我 们 编写 的 标签 ， 然 后 创建 JavaScript 对 象 。 它 是 一 种 便捷 的 语法 ， 用 于 帮助 构建 组 
件 树 。 

如 前 所 述 ， 当 我 们 在 代码 中 使 用 JSX 标签 时 ， 它 会 转换 为 ReactElement : 


var boldElement = <b>Text (as a string)</by> ; 
// =、〉boldElement 现在 是 一 个 ReactElement 
























































可 以 将 ReactElement 传递 给 ReactDOM.render 函数 并 查看 代码 在 页 面 上 深 染 的 效果 。 


但 是 有 一 个 问题 : ReactElement 是 无 状态 且 不 可 变 的 。 如 果 我 们 想 在 应 用 程序 中 添加 交互 性 ( 带 
状态 )， 就 需要 另 一 块 拼图 : ReactComponent。 


下 一 章 将 深入 讨论 ReactComponent 。 


4.7 参考 文献 


想 要 阅读 更 多 关于 JSX 和 虚拟 DOM 的 信息 ， 可 以 查看 以 下 这 些 文档 : 























起 











@ Reacr 网 站 的 “JSX in Depth” 一 一 ( Facebook ) 
@ Reacr 网 站 的 “If-Else in JSX” 一 一 (Facebook ) 
@ Reacr 网 站 的 “React (Virtual) DOM Terminology” 一 一 (Facebook ) 


e@ “What is Virtual DOM” —— (Jack Bishop ) 


具有 props、state 和 
children 的 高 级 组 件 配置 











与 本 书 其 他 章节 不 同 ， 本 章 旨 在 深入 研究 React 的 不 同 特征 。 因 此 ， 本 章 没 有 包含 循序 渐进 风格 
的 项 目 。 











本 章 将 深入 研究 组 件 的 配置 。 
ReactComponent 是 一 个 JavaScript 对 象 ， 它 至 少 有 一 个 render( ) 函数 。render( ) 函数 需要 返回 


一 个 ReactElLement。 


回顾 一 下 ，ReactElement 指 的 是 虚拟 DOM 中 DOM 元 素 的 表示 。 








3 第 4 章 广 泛 讨论 了 ReactElement 。 如 果 想 更 好 地 理解 ReactElement ,请 查看 该 章 。 


ReactComponent 的 目标 如 下 所 示 : 


@ 在 render() 函 数 中 泻 染 一 个 ReactElement ( 它 最 终 将 成 为 真正 的 DOM ); 
@ 将 功能 附加 到 页 面 的 这 个 部 分 。 


“附加 功能 ”这 个 表述 有 点 含糊 不 清 ， 它 包括 附加 事件 处 理 程序 、 管 理 状态 、 与 子 级 交互 等 。 本 






































@ render() 一 一 每 个 ReactComponent 中 唯一 必需 的 函数 ; 
@ props 组 件 的 “输入 参数 ”; 

@ context 组 件 的 “全 局 变量 ”; 

@ state 一 一 保存 组 件 本 地 数据 的 地 方 ( 影响 泻 染 ); 

@ 无 状态 组 件 一 一 编写 可 重用 组 件 的 简化 方法 ; 

@ children 一 一 允许 与 子 组 件 交 互 并 操纵 子 组 件 ; 

@ statics 允许 在 组 件 上 创建 “类 方法 ”。 











让 我 们 开始 吧 ! 
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5.2 ”如 何 使 用 本 章 


本 章 是 使 用 名 为 styleguidist 的 特定 工具 构建 的 。 代 码 中 有 一 个 名 为 components-cookbook 的 
部 分 ， 该 部 分 附带 了 与 之 绑 定 的 styleguidist 工具 。 要 使 用 允许 对 组 件 本 身 进行 内 部 检查 的 
styleguidist 工具 ， 可 以 通过 本 章 开始 该 部 分 。 

为 了 启动 它 ， 请 切换 到 components-cookbook/ 的 代码 目录 ， 需 要 修改 几 个 文件 才能 运行 代码 。 
因为 要 使 用 一 些 变量 来 定义 配置 ， 所 以 需要 在 代码 中 包含 这 些 变量 。 

有 多 种 方法 可 以 处 理 这 个 过 程 , 我 们 在 代码 中 的 设计 方式 是 使 用 环境 变量 。 这 样 就 可 以 为 不 同 的 
环境 提供 环境 变量 ， 只 需要 使 用 在 构建 计 程 中 替换 的 变量 

检查 webpack .config.js 文件 ， 并 使 用 webpack .DefinePlugin 以 及 dotenv 包 ( 用 于 读 取 目录 
中 的 .env 文件 ) 定义 该 过 程 : 


pe 
plugins: [ 
new webpack.DefinePlugin({ 
_ WEATHER_API_KEY.__: JSON.stringify(cfg.parsed.WEATHER_API_KEY), 
GOOGLE_API_KEY__: JSON.stringify(cfg.parsed.GOOGLE_API_KEY) 
}) 
] 
} 


需要 在 根 目 录 ( 顶级 目录 ) 中 创建 .env 文件 才能 使 其 正常 工作 。 让 我 们 添加 一 个 .env 文件 : 
touch .env 
我 们 要 在 这 个 文件 中 定义 这 些 变 量 。 开 始 时 它们 可 以 是 空 变量 ,， 也 可 以 使 用 密 角 : 


WEATHER_API_KEY='1e78b4ef2f66eb0146c13f070ea33702' 
GOOGLE_API_KEY="" 


稍 后 可 以 修改 这 些 变量 ， 以 便 在 部 署 时 将 它们 设置 为 新 密 铀 的 值 。 
接 下 来 在 终端 中 切换 到 根 目 录 并 发 出 以 下 命令 。 首 先 需 要 使 用 npm install 获取 项 目的 依赖 项 : 
npm install 
启动 该 应 用 程序 ， 需 要 发 出 npm start 命令 
npm start 


一 旦 服务 器 运行 起 来 , 我 们 就 可 以 导航 到 浏览 器 并 转 到 http://1ocalhost:6660。 我 们 将 看 到 样 
式 指南 与 本 章 所 有 公开 的 组 件 一 起 运行 ， 并 可 以 浏览 实时 执行 的 组 件 的 运行 示例 。 











































































































































































































5.3 ReactComponent 


5.3.1 使 用 createReactClass 或 ES6 类 创建 ReactComponent 
如 第 1 章 所 述 ， 有 两 种 方法 可 以 定义 ReactComponent 实例 : 
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(1) createReactClass( ) 函数 ; 
(2) ES6 类。 


如 我 们 所 见 ， 如 下 创建 组 件 的 两 种 方法 大 致 相同 : 


advanced-components/components-cookbook/src/components/Component/CreateClassApp.js 





import React from 'react'; 
import createReactClass from 'create-react-class'; 





// React.createClass 
const CreateClassApp = createReactClass({ 
render: function() {} // required method 


}); 
export default CreateClassApp; 
和 


advanced-components/components-cookbook/src/components/Component/Components.js 








import React from 'react'; 


// ES6 类 风格 

class ComponentApp extends React.Component { 
render() {} // required 

} 


export default ComponentApp; 








无 论 使 用 什么 方法 来 定义 ReactComponent，React 都 希望 我 们 定义 render( ) 函数 。 


5.3.2 ”render( ) 函数 返回 一 个 ReactElement 树 
render( ) 方 法 “是 在 ReactComponent 上 定义 的 唯一 必需 的 方法 。 


在 组 件 挂 载 并 初始 化 后 ,render( ) 函数 会 被 调用 .render( ) 函数 的 工作 是 为 React 提供 原生 DOM 
组 件 的 虚拟 表示 。 


将 createReactCclass() 与 render() 困 数 一 起 使 用 的 例子 如 下 所 示 : 


advanced-components/components-cookbook/src/components/Component/CreateClassHeading.js 












































const CreateClassHeading = createReactClass({ 
render: function() { 
return <hi>Hello</h1»; 
} 
}); 





或 者 使 用 ES6 类 风格 的 组 件 : 























Oz 一 般 来 说 , 面向 对 象 技术 中 的 称 为 方法 , 面向 过 程 中 的 称 为 函数 。 本 书 翻译 时 是 按 作者 原 书 翻译 的 , 将 “function” 
译 为 “也 数 ”"， 将 “method” 译 为 方法 。 一 一 译 者 注 
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advanced-components/components-cookbook/src/components/Component/Header.js 





class Heading extends React.Component { 
render() { 
return ( 
<h1i>Hello</h1> 
) 
} 
}; 

















上 面 的 代码 看 起 来 应 该 很 熟悉 。 它 描述 了 一 个 具有 单个 render( ) 方 法 的 Heading 组 件 类 ， 该 方 
法 返回 ch1> 标 签 的 一 个 简单 的 虚拟 DOM 表示 。 

请 记 住 ， 此 render( ) 方 法 返回 的 ReactElement 不 是 “实际 的 DOM” 的 一 部 分 ， 而 是 返回 虚拟 
DOM 的 描述 。 


React 期 望 render( ) 方 法 返回 单个 子 元 素 。 它 可 以 是 DOM 组 件 的 虚拟 表示 , 也 可 以 返回 null 或 
false 这 样 的 假 值 。React 通过 演 染 一 个 空 元素 (一 个 cnoscript /标签 ) 来 处 理 假 值 ， 用 于 从 页 面 
中 删除 该 标签 。 


保持 render( ) 方 法 的 副作用 ， 它 免费 提供 了 一 个 重要 的 优化 ， 并 使 得 代码 更 容易 理解 。 
5.3.3 ”把 数据 放 入 render( ) 函数 

虽然 render( ) 方 法 是 唯一 需要 的 方法 ， 但 如 果 我 们 唯一 可 以 泻 染 的 是 在 编译 时 已 知 的 数据 ， 那 
就 不 是 很 有 趣 了 。 也 就 是 说 ， 我 们 需要 一 种 方法 : 

e@ 可 以 将 “参数 ”输入 组 件 中 ; 

e@ 可 以 在 组 件 中 维护 状态 。 

React 提供 了 实现 这 两 种 功能 的 方法 ， 分 别 是 props 和 state。 

要 使 得 组 件 在 更 大 的 应 用 程序 中 具有 动态 性 和 可 用 性 ， 理 解 这 些 至 关 重 要 。 

在 React 中 ，props 是 从 父 组 件 传 递 到 子 组 件 的 不 可 变数 据 片 段 。 

组 件 的 state 是 保存 组 件 本 地 数据 的 地 方 。 通 常 当 组 件 的 state 发 生变 化 时 ,组 件 需要 重新 演 染 。 
与 props 不 同 ，state 是 组 件 私 有 的 ， 且 是 可 变 的 。 

下 面 将 详细 介绍 props 和 state。 在 此 过 程 中 ， 还 将 讨论 context ， 它 是 一 种 通过 整个 组 件 树 传 
递 的 “ 隐 式 props 。 

让 我 们 更 详细 地 看 一 下 这 些 内 容 。 




















































































































































































































5.4 ”props 是 参数 


props 是 组 件 的 输入 。 如 果 我 们 将 组 件 视 为 函数 ， 则 可 以 将 props 视 为 参数 。 
让 我 们 来 看 一 个 例子 : 
<div> 


<Header headerText="Hello world" /> 
</div> 
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在 示例 代码 中 ,我 们 创建 了 一 个 cdiv> 和 一 个 cHeader、 元 素 ， 其 中 div 是 普通 的 DOM 元 素 ， 而 
<Header> 则 是 Header 组 件 的 一 个 实例 。 


在 这 个 例子 中 ， 我 们 通过 headerText 属性 将 来 自 当前 组 件 的 数据 (字符 串 "Hello wor1d" ) 传 
递 给 Header 组 件 。 


2 将 数据 通过 属性 传递 给 组 件 的 方式 通常 称 为 props 传递 。 











当 我 们 通过 属性 将 数据 传递 给 组 件 时 ， 它 可 以 通过 this.props 属性 被 组 件 使 用 。 因 此 在 这 个 例 
子 中 ， 我 们 可 以 通过 this .props .headerText 属性 访问 headerText : 





























import React from 'react'; 


export class Header extends React.Component { 
render() { 
return ( 
<h1i>{this.props.headerText}</h1> 
); 
} 
} 


虽然 可 以 访问 headerText 属性 ， 但 无 法 修改 它 。 
我 们 通过 使 用 props 获得 了 静态 组 件 ， 并 允许 它 根 据 传递 进去 的 neaderText 值 进行 动态 演 染 。 
<Header> 组 件 不 能 修改 headerText ， 但 它 可 以 使 用 headerText 本 身 或 将 其 传递 给 它 的 子 级 。 


可 以 通过 props 传递 任何 JavaScript 对 象 。 可 以 传递 基本 类 型 、 简单 的 JavaScript 对 象 、 原 子 操作 、 
函数 等 ， 甚 至 可 以 传递 其 他 React 元 素 和 虚拟 DOM 节点 。 


可 以 使 用 props 记录 组 件 的 功能 ， 还 可 以 使 用 PropTypes 指定 每 个 属性 的 类 型 。 









































5.5 PropTypes 





PropTypes 是 验证 通过 props 传递 的 值 的 一 种 方法 。 定 义 良好 的 接口 在 应 用 程序 运行 时 为 我 们 提 
供 了 一 层 安全 保障 ， 还 向 组 件 的 使 用 者 提供 了 一 份 文档 。 


我 们 在 package. json 中 包含 了 prop-types 的 依赖 包 。 


我 们 通过 设置 静态 (类 ) propTypes 属性 来 定义 PropTypes。 这 个 对 象 的 结构 应 该 是 属性 名 的 键 
到 PropTypes 值 的 映射 : 


class MapComponent extends React .Component { 
static propTypes = { 
lat: PropTypes .number ， 
lng: PropTypes .numbeTr ， 
Zoom: PropTypes.number, 
place: PropTypes.object， 
markers: PropTypes .array 
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如 果 使 用 createReactClass， 我 们 定义 PropTypes 时 将 它们 作为 一 个 选项 传递 给 
createReactClass( ) 方 法 : 
const MapComponent = createReactClass({ 
propTypes: { 
lat: PropTypes .number ， 
lng: PropTypes.number 
pL Bt 
i 
} 
在 上 面 的 示例 中 ,组 件 将 验证 1at 、lng 和 zoom 是 否 都 是 数字 ， 而 place 是 一 个 对 象 ，marker 
是 一 个 数组 。 


有 许多 内 置 的 PropTypes ， 我 们 可 以 自己 定义 。 


我 们 在 附录 A 中 为 许多 PropTypes 验证 带 编 写 了 一 个 代码 示例 。 有 关 PropTypes 的 更 多 详细 信 
， 请 查看 该 附录 。 


下 面 需 要 知道 有 标量 类 型 的 验证 带 : 


@ string; 























[oy 


@ Number; 


@ booleano。 
还 可 以 验证 复杂 类 型 ， 如 : 
function; 
object ; 
array; 
array0f 一 一 期 望 得 到 一 个 特定 类 型 的 数组 ; 





node ; 





@ 
@ 
@ 
@ 
@ 
@ element。 
还 


可 以 验证 输入 对 象 的 特定 类 型 ， 或 验证 它 是 否 是 特定 类 的 实例 。 


5.6 使 用 getDefaultProps() 获 取 默 认 props 


有 了 时候 我 们 希望 props 具有 默认 值 。 可 以 使 用 静态 属性 defaultProps 来 执行 此 操作 。 


例如 ， 创建 一 个 Counter 组 件 的 定义 ， 并 告诉 组 件 如 果 在 props 中 没有 设置 initialValue， 则 
使 用 defaultProps 将 其 设置 为 1: 


class Counter extends React.Component { 
static defaultProps = { 
initialValue: 1 
中 
Ll se 
把 


























120 第 5 章 


具有 props、state 和 children 的 高 级 组 件 配置 








现在 可 以 在 不 设置 initialValue 属性 的 情况 下 使 用 该 组 件 。 组 件 的 这 两 个 用 法 在 功能 上 等 效 : 


<Counter /> 
<Counter initia 


5.7 上 下 文 





Value={1} /> 








有 时 候 可 能 需要 有 一 个 想 要 “全 




















局 ”公开 的 属性 。 在 这 种 情况 下， 我 们 可 

















属性 从 根部 通过 各 个 中 间 组 件 传 递 到 每 个 叶子 组 件 是 很 麻烦 的 。 











从 React 16.3.0 开始 ，React 添加 了 新 的 API， 它 人 允 诗 
而 无 须 手动 将 变量 从 父 组 件 传递 给 子 组 件 。 


React 的 上 下 文 API 比 旧 的 更 有 效 ， 因 为 其 中 实验 版 的 context 支 














Ff 我 们 指定 想 要 通过 组 件 树 向 下 传递 的 变量 ， 


竺 静态 类 型 检查 和 深度 更 新 。 








为 了 告诉 React 我 们 想 向 下 传递 一 个 context “全 局 ”变量 ,需要 使 用 上 下 文 API 来 指定 它 。 让 


上 下 文 派 上 用 场 的 一 个 例子 是 ， 在 组 件 层次 结构 中 向 下 传递 一 个 组 件 树 | 


选项 。 





次 结构 中 的 任何 位 置 








和 














P 许 多 组 件 需 要 的 主题 或 首 


当 我 们 指定 一 个 context 时 ，React 负责 将 context 从 一 个 组 件 传 递 到 另 一 个 组 件 ， 以 便 在 树 层 
EF 何 组 件 都 可 以 到 达 定 义 它 的 “全 局 ”上 上 下文， 并 能 访问 父 组 件 的 变量 。 


为 了 告诉 React 我 们 想 要 通过 上 下 文 传递 一 个 变量 ， 则 需要 定义 一 个 向 下 传递 的 上 下 文 。 为 此 ， 
可 以 先 使 用 React .createContext() 方 法 定义 Provider/Consumer 组 件 上 下 文 的 context。 


然后 使 用 上 下 文 的 Provider 组 件 (该 组 件 专门 用 于 传递 上 下 文 ) 通过 React 树 向 下 传递 上 下 文 。 
可 以 通过 把 consumer 组 件 作为 Provider 组 件 的 子 元 素 从 Provider 组 件 中 访问 该 上 下 文 。 


证 我 们 看 看 它 是 如 何 工作 的 。 假 设 我 们 想 为 用 户 提供 为 网 站 选择 主题 的 能 力 。 下 面 来 看 一 个 明暗 














主题 ， 见 图 5-1。 

















Welcome to React 


Welcome to React 




















To get started, edit src/App. js and save to reload. 


[enange thome 
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为 了 定义 一 个 上 下 文 ， 需 要 创建 一 个 React 上 下 文 来 保存 主题 。 我 们 将 使 用 React .createContext() 
方法 来 执行 此 操作 : 


advanced-components/components-cookbook/src/components/theme/src/theme.js 














mport React from 'react'; 


OA 


export const ThemeContext = React.createContext(themes .dark ) 




















React.createContext() 方 法 只 接收 一 个 参数 ， 该 参数 是 上 下 文 提供 的 默认 值 。 在 这 个 例子 中 ， 
我 们 的 主题 将 默认 设置 为 themes .dark 值 。 

现在 已 有 了 ThemeContext, 我 们 想 要 将 这 个 主题 提供 给 子 组 件 。 创建 好 ThemeContext 后 ,可 以 
使 用 Provider 组 件 传递 该 主题 。 

例如 ， 在 下 面 演示 的 应 用 程序 中 ， 我 们 会 有 一 个 使 用 Header 组 件 的 App 组 件 。 在 App 组 件 中 ， 
可 以 指定 一 个 主题 。 


advanced-components/components-cookbook/src/components/theme/src/App.js 













































































class App extends Component { 

state = {theme: themes.dark}; 

NO 

render() { 

return ( 
“<div className="App"> 
<ThemeContext .Provider value={this.state.theme}> 
<Header /> 
<p className="App-intro"> 
To get started, edit <code>src/App.js</code> and save to reload. 

</p> 


<button onClick={this.changeTheme}>Change theme</button> 
</ThemeContext .Provider> 
</div> 
); 
} 
通过 ThemeContext .Provider 组 件 传递 主题 ， 它 允许 我 们 从 较 低 层次 的 组 件 中 获取 该 主题 。 请 
注意 ,我 们 在 ThemeContext .Provider 组 件 中 传递 了 value 属性 。 如 果 没 有 这 个 value 属性 ， 那 么 
子 组 件 就 无 法 访问 该 提供 者 的 值 。 
ThemeContext .Provider 组 件 是 一 个 特殊 的 组 件 ， 它 专门 设计 用 于 把 数据 传递 给 子 组 件 。 
为 了 消费 该 上 下 文 的 值 ， 需 要 使 用 之 前 从 ThemeContext 导出 的 另 一 个 组 件 : Consumer 组 件 。 


下 面 来 看 cHeader /> 组 件 。 我 们 希望 它 可 以 访问 全 局 的 主题 上 下 文 ， 因 此 需要 在 此 处 导入 


ThemeContext : 






















































































advanced-components/components-cookbook/src/components/theme/src/Header.js 





import {ThemeContext} from './theme'; 


























下 面 可 以 使 用 ThemeContext 的 消费 者 组 件 从 Provider 父 组 件 中 获取 主题 : 
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advanced-components/components-cookbook/src/components/theme/src/Header.js 





export const Header = props => ( 
“<ThemeContext .Consumer> 
{theme => ( 
<header 
className="App-header" 
style={{backgroundColor: theme.background}} 


<img src={logo} className="App-logo" alt="logo" /> 
<h1 className="App-title" style={{color: theme.foreground}}> 
Welcome to React 
</h1> 
</header> 
)} 
</ThemeContext.Consumer> 


2 
































Consumer 组 件 的 用 法 可 能 看 起 来 与 我 们 习惯 使 用 的 有 点 不 同 ， 它 的 子 项 是 一 个 方法 ， 并 将 
Provider 组 件 的 值 作为 参数 传递 给 该 方法 。 使 用 此 方法 ,我们 可 以 访问 传递 下 来 的 属性 。 
如 果 我 们 希望 能 够 动态 更 新 组 件 提供 的 值 , 只 需 修改 App 组 件 中 state.theme 的 值 , 就 像 普 通 的 
状态 修改 一 样 。 


advanced-components/components-cookbook/src/components/theme/src/App.js 





























三 


























class App extends Component { 
state = {theme: themes.dark}; 
VS 
changeTheme = evt => { 
this .setState(state => ({ 
theme: state.theme === themes.dark ? themes.light : themes.dark 
})); 
所 
A ea 
} 





5.7.1 默认 值 
我 们 之 前 传人 的 默认 值 呢 ? 


advanced-components/components-cookbook/src/components/theme/src/theme.js 





import React from 'react'; 
HA ts 


export const ThemeContext = React.createContext(themes.dark); 
































如 果子 组 件 没有 包装 在 ThemeContext .Provider 组 件 中 ， 那 么 这 些 消 费 者 将 使 用 默认 值 。 
5.7.2 多 个 上 下 文 


可 以 像 平 常 一 样 在 应 用 程序 中 包装 多 个 上 下 文 提供 者 。 事实 上 ， 无 须 做 任何 特别 的 事情 。 可 以 简 
单 地 将 组 件 包装 在 多 个 上 下 文 Provider 组 件 中 。 
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假如 有 一 个 UserContext: 


advanced-components/components-cookbook/src/components/theme/src/user.js 





import React from 'react'; 
LL a 


export const UserContext = React.createContext(null 


好 





可 以 用 相同 的 方式 来 访问 User 的 上 下 文 : 


advanced-components/components-cookbook/src/components/theme/src/Body.js 





import {UserContext} from './user'; 
ML 
export const Body = props => ( 
“<ThemeContext .Consumer> 
{theme => ( 
<header 
className="App-header" 
style={{backgroundColor: theme.background}} 
> 
<UserContext .Consumer> 


<hi>{user => (user ? 'Welcome back' : 'Welcome')}</h1> 


</UserContext .Consumer> 
</header> 


)} 


</ThemeContext .Consumer> 


); 

















Consumer 组 件 必须 源 自 创建 它 的 上 下 文 。 如 果 不 是 这 样 ,该 值 就 不 会 被 传递 下 来 。 因此, 需要 在 














同一 个 文件 中 创建 上 下 文 并 导出 ， 否 则 该 值 将 不 起 作用 。 





5.8 state 








我 们 将 在 组 件 中 处 理 的 第 二 类 数据 是 state。 要 想 知道 何 时 应 用 


























件 的 概念 。 当 组 件 需 要 保存 动态 数据 块 时 ， 就 可 以 认为 该 组 件 是 有 状态 的 。 
例如 ， 当 一 荔 灯 的 开关 打开 时 ， 则 该 灯 开 关 保 持 “ 开 启 ” 状 态 。 把 灯 关 掉 可 描述 为 把 灯 的 状态 翻 




















在 构建 应 用 程序 时 ， 可 能 会 有 一 个 描述 特定 设置 的 开关 ， 例 如 需要 验证 的 输入 或 聊天 应 用 程序 中 








特定 用 户 的 存在 值 。 这 些 都 是 用 于 保持 组 件 状态 的 情况 。 











state， 我 们 需要 了 解 有 状态 组 























我 们 把 包含 本 地 可 变数 据 的 组 件 称 为 有 状态 组 件 。 下 面 会 








1 会 访 

















细 讨 论 何 时 应 该 使 | 





] 组 件 状态 ， 而 现 





在 只 需要 知道 应 该 尽 可 能 少 地 使 用 有 状态 组 件 。 这 是 因为 状态 引入 了 复杂 性 ,使 得 组 件 的 组 合 使 用 变 





得 更 加 困难 。 也 就 是 说 ， 有 时 需要 组 件 的 本 地 状态 ， 因 此 我 们 先 来 看 如 何 实 现 它 ， 然 后 再 讨论 何 时 使 


用 它 。 








va 
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5.8.1 使 用 state 构 建 自 定义 单 选 按钮 


在 此 示例 中 ， 我 们 将 使 用 内 部 状态 来 构建 单 选 按钮 以 在 支付 方式 之 间 切 换 。 图 5-2 是 完成 后 的 表 
单 的 样子 。 














Switch 


Pay with Creditcard 
Pay with Bitcoin 
Paying with: Creditcard 


<Switch /> 


Switch between choices. 


图 5-2 简单 的 开关 





让 我 们 来 看 如 何 使 组 件 变 得 有 状态 : 


advanced-components/components-cookbook/src/components/Switch/steps/Switch1.js 


class Switch extends React.Component { 
state = {}; 





render() { 
return <div> <em>Template will be here</em> </div»; 


} 
} 


module.exports = Switch; 

















就 像 上 面 这 样 ! 当然 ,仅仅 在 组 件 上 设置 状态 并 不 是 那么 有 趣 。 要 在 组 件 上 使 用 状态 ， 我 们 需要 
使 用 this.state 来 引用 它 : 





advanced-components/components-cookbook/src/components/Switch/steps/Switch2.js 


const CREDITCARD = 'Creditcard’'; 
const BIC = 'Bitcoin'; 





class Switch extends React.Component { 
state = { 
payMethod: BTC, 
所 


render() { 
return ( 
<div className='switch'> 
<div className='choice'>Creditcard</div> 
<div className='choice'>Bitcoin</div> 
Pay with: {this.state.payMethod} 
</div> 
); 
} 
} 


module.exports = Switch; 
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在 render() 清 数 中 ， 可 以 看 到 用 户 能 够 选择 的 选项 ( 尽管 我 们 还 不 能 改变 支付 方式 ) 以 及 存储 
在 组 件 的 state 中 的 当前 选项 。 现 在 Switch 组 件 已 有 状态 了 ， 因 为 它 跟踪 了 用 户 的 首选 支付 方式 。 
昌 件 的 状态 。 让 我 们 通过 在 用 户 选择 不 同 的 支付 


但 支付 开关 还 不 具有 交互 性 ， 因 为 我 们 无 法 改变 组 
方式 时 添加 一 个 事件 处 理 程序 来 连接 第 一 个 交互 。 

为 了 添加 交互 ， 我 们 需要 响应 点 击 事 件 。 任 何 组 件 要 添加 回调 处 理 
onClick 属性 。 只 要 点 击 定义 它 的 组 件 ， 就 会 触发 onClick 处 理 程序 。 


advanced-components/components-cookbook/src/components/Switch/steps/Switch3.js 
























































程序 ， 可 以 在 组 件 上 使 用 


























return 
<dqiv className='switch'> 
<div 
className= 'choice' 
onClick={this.select(CREDITCARD)} // 添加 this 





>Creditcard</div> 
<div 








ClassName= 'choice' 
onClick={this.select(BTC)} // ii 这 里 也 一 样 
>Bitcoin</div> 
Pay with: {this.state.payMethod} 
</div> 
和 
时 序 ， 每 次 点 击 其 中 一 个 cdiv> 元 素 时 都 会 调用 





E 时 ， 我 们 附加 了 一 个 回调 处 理 程 














使 用 onclick 属 履 
该 回调 处 理 程序 。 
onClick 处 到 


函数 : 
advanced-components/components-cookbook/src/components/Switch/steps/Switch3.js 








件 发 生 时 调用 。 让 我 们 来 看 一 下 select 


山中 











程序 期 望 接收 一 个 函数 ,该 函数 将 在 点 击 








class Switch extends React.Component { 
state = { 

payMethod: BTC, 

ye 


select = (choice) => { 
return (evt) => { 
// “-- 处 理 程序 从 这 里 开始 
this .setState(1{ 
payMethod: choice, 


}); 





关于 select 图 数 ， 要 注意 两 点 : 


(1) 它 的 返回 值 是 一 个 函数 ; 
(2) 它 使 用 了 setState() 方 法 。 
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1. 返回 一 个 新 函数 


注意 select 和 onclick 的 一 些 有 趣 之 处 : onclick 属性 
一 个 函数 。 这 是 因为 select 函数 本 身 会 返回 一 个 函数 。 


这 是 向 处 理 程序 传递 参数 的 常见 模式 。 当 调用 select 函数 时 , 我 们 会 关闭 choice 参数 。select 
函数 会 返回 一 个 新 函数 ， 新 函数 将 使 用 
其 








要 传人 一 个 函数 ， 但 我 们 首先 调用 了 


























适当 的 choice 参数 来 调用 setState() 方 法 。 











当 其 中 一 个 cdiv> 子 元 素 被 点 击 时 ， 人 处 理 函 数 就 会 被 调用 。 请 注意 ，select 函数 实际 上 是 在 泻 染 
过 程 中 调 











上 的， 而 onClick 调用 的 是 select 函数 的 返回 值 。 
2. 更 新 状态 

调用 处 理 函 数 时 ， 组 件 会 自己 调用 setstate( ) 方 法 。 调 用 setState() 方 法 会 触发 刷新 ， 这 意味 着 
render( ) 函数 会 被 再 次 调用 ， 那 么 我 们 就 能 够 在 视图 中 看 到 当前 的 state.payMethod 值 。 


个 setState() 方 法 会 影响 性 能 
因为 setState( ) 方 法 会 触发 刷新 ， 所 以 我 们 要 注意 调用 它 的 频率 。 


修改 实际 的 DOM 很 慢 ， 因 此 我 们 不 希望 触发 一 连 串 的 setStates() 方 法 调用 ， 因 
为 这 可 能 导致 用 户 的 性 能 变 得 很 差 。 


3. 查看 选项 




































































在 组 件 中 ， 除 了 附带 的 文本 之 外 ,我 们 还 没有 方法 来 表明 
ee“ 有 被 选择 的 视觉 指示 ， 那 会 很 好 。 我 们 通 
实现 这 一 点 。 本 例 中 使 用 className 属性 


为 了 做 到 这 一 点 ， 需 要 根据 组 件 的 当前 状态 添加 一 些 CSS 类 的 逻辑 。 
但 在 添加 大 多 的 CSS 逻辑 之 前 ， 让 我 们 先 重 构 该 组 件 并 使 用 一 个 函数 来 渔 染 每 个 选项 : 


advanced-components/components-cookbook/src/components/Switch/steps/Switch4.js 














选择 了 哪个 选项 。 
常会 


通过 应 用 一 个 CSS 的 active 类 来 
































<div className='choice' onClick={this.select(choice)}>» 
{choice} 


</div> 
) ; 
7 


render() { 
return ( 
<div className='switch'> 
{this.renderChoice(CREDITCARD)} 
{this.renderChoice(BTC)} 


Pay with: {this.state.payMethod} 
</div> 
好 
} 
} 


module.exports = Switch; 
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现在 不 再 将 所 有 的 泻 染 代码 放 入 render( ) 函数 中 ， 而 是 将 选项 的 泻 染 隔离 到 它 自 己 的 函数 中 。 
最 后 将 .active 类 添加 到 <qiv> 选 项 组 件 。 


advanced-components/components-cookbook/src/components/Switch/steps/Switch$.js 

















const cssClasses = []; 


if (this.state.payMethod === choice) { 
cssClasses.push(styles.active); // 添加 .active 类 
} 
return ( 
<div 


className='choice’ 
onClick={this.select(choice)} 
className={cssClasses} 

> 
{choice} 

«</div> 

六 
}; 


render() { 
return ( 
<div className='switch'> 
{this.renderChoice(CREDITCARD)} 
{this.renderChoice(BTC)} 
Pay with: {this.state.payMethod} 
</div> 
); 
} 





请 注意 ， 我 们 是 将 styles.active 样式 推送 到 cssClassses 数组 中 。 那 么 styles 
来 自 哪 里 ? 


对 于 这 个 代码 示例 ， 我 们 使 用 了 webpack 加 载 器 来 导入 CSS。 本 章 不 会 深入 研究 
webpack 的 工作 原理 ， 但 为 了 让 你 知道 如 何 使 用 它 ， 你 需要 知道 以 下 两 点 。 


(1) 导入 像 这 样 的 导入 样式 : import styles from '../Switch.css'。 
(2) 这 意味 着 文件 中 的 所 有 样式 都 可 以 像 对 象 一 样 访问 ， 例 如 styles.active 为 我 
们 提供 了 对 Switch.css 文件 中 的 .active 类 的 引用 。 


这 样 做 是 因为 它 是 CSS 封装 的 一 种 形式 。 也 就 是 说 ， 实 际 的 CSS 类 事实 上 不 
是 .active， 这 意味 着 我 们 不 会 与 其 他 可 能 使 用 相同 类 名 的 组 件 发 生 冲 突 。 


5.8.2 ”有 状态 的 组 件 


在 组 件 上 定义 状态 要 求 我 们 在 对 象 原型 类 中 设置 一 个 名 为 this.state 的 实例 变量 。 为 了 做 到 这 
一 点 ， 它 要 求 我 们 在 两 个 地 方 之 一 设置 状态 要么 作为 类 的 属性 ， 要 么 在 构造 函数 中 设置 。 
以 这 种 方式 设置 有 状态 的 组 件 的 好 处 如 下 所 示 。 
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(1) 允许 我 们 定义 组 件 的 初始 状态 。 
(2) 告诉 React 我 们 的 组 件 会 是 有 状态 的 。 如 果 没 有 定义 这 个 方法 ， 组 件 会 被 视 为 无 状态 的 。 


对 于 一 个 有 状态 的 组 件 ， 它 看 起 来 如 下 所 示 : 


advanced-components/components-cookbook/src/components/InitialState/Component.js 


























class InitialStateComponent extends React.Component { 


ff 
constructor(props) { 
super(props) 


this.state = { 
currentValue: 1， 
currentUser: { 
name: "Ari” 


本 
} 


在 此 示例 中 ，state 对 象 只 是 一 个 JavaScript 对 象 ， 但 我 们 可 以 在 此 函数 中 返回 任何 数据 。 例 如 ， 
我 们 可 能 想 要 将 它 设 置 为 一 个 单独 的 值 : 


advanced-components/components-cookbook/src/components/InitialState/Component.js 




















class Counter extends React.Component { 
constructor(props) { 
super(props) 


this.state = 0 
} 























其 实 不 应 该 在 组 件 中 设置 props。 在 处 理 组 件 的 状态 时 ， 只 有 在 设置 state 属性 的 初始 值 时 才 应 
该 使 用 props。 也 就 是 说 ， 如 果 想 要 将 属性 值 设 置 到 状态 中 ， 则 应 该 在 这 时 候 做 。 

如 果 在 组 件 中 有 一 个 属性 表示 该 组 件 的 值 ， 那 么 我 们 应 该 将 该 值 应 用 到 constructor() 方 法 的 
state 属性 中 。 作 为 属性 值 的 更 好 的 名 称 是 initialValue， 它 表示 将 设置 该 值 的 初始 状态 。 
例如 ， 有 一 个 Counter 组 件 , 它 显示 一 个 计数 并 包含 一 个 递增 和 递减 按钮 。 可 以 像 下 面 这 样 设置 
计数 器 的 初始 值 : 


advanced-components/components-cookbook/src/components/Counter/CounterWrapper.js 












































































































































const CounterWrapper = props => ( 
<div key="counterWrapper"> 
<Counter initialValue={125} /> 
</div> 
) 


从 “counter> 组 件 的 使 用 可 以 知道 ，Counter 组 件 的 值 只 会 通过 initialValue 属性 来 改变 。 
Counter 组 件 可 以 在 constructor( ) 也 数 中 使 用 该 属性 : 
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advanced-components/components-cookbook/src/components/Counter/Counter.js 





class Counter extends Component { 
constructor(props) { 
super(props); 


this.state = { 
value: this.props.initialValue 


站 


this.increment 
this.decrement 
} 
Wd i 
} 


this.increment.bind(this); 
this.decrement.bind(this); 














由 于 构造 函数 在 组 件 本 身 挂 载 之 前 只 运行 一 次 ， 因 此 我 们 可 以 使 用 它 来 建立 初始 状态 。 


5.8.3 ”状态 更 新 依赖 于 当前 状态 
Counter 组 件 具 有 递增 和 递减 计数 的 按钮 ， 见 图 5-3。 




















125 


图 5-3” Counter 组 件 


当 点 击 “-” 按钮 时 , React 会 调用 decrement() 方 法 。 decrement() 方 法 会 从 state 的 值 中 减 去 1。 
类 似 这 样 做 似乎 就 足够 了 : 


advanced-components/components-cookbook/src/components/Counter/Counterl.js 











decrement = () => { 
// 看 起 来 是 正确 的 ， 但 有 更 好 的 方法 
const nextValue = this.state.value - 1; 
this .setState({ 
value: nextValue 
二 
}; 








但 是 ， 当 状态 更 新 依赖 于 当前 状态 时 ， 最 好 将 一 个 函数 传递 给 setState( ) 方 法 。 可 以 这 样 做 : 


advanced-components/components-cookbook/src/components/Counter/Counter.js 





this.decrement = this.decrement .bind(this ) 


setState() 方 法 将 使 用 先前 版 本 的 状态 作为 第 一 个 参数 来 调用 此 函数 。 
为 什么 需要 这 样 设置 状态 ?这 是 因为 setstate( ) 方 法 是 异步 的 。 
这 里 有 一 个 例子 。 假设 我 们 正在 使 用 第 一 个 decrement() 方 法 , 并 将 一 个 对 象 传递 给 setState() 
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方法 。 当 我 们 第 一 次 调用 decrement( ) 方 法 时 ,， 它 的 值 为 125。 然 后 再 次 调用 setstate( ) 方 法 , 并 传 
递 一 个 值 为 124 的 对 象 。 

但 是 状态 不 一 定 会 立即 更 新 。 相 反 ，React 会 将 我 们 请 求 的 状态 更 新 添加 到 其 队列 中 。 

假设 用 户 点 击 鼠 标的 速度 特别 快 ， 但 计算 机 的 处 理 速度 特别 慢 。 在 React 抽出 时 间 来 进行 先前 的 
状态 更 新 之 前 ， 用 户 设法 再 次 点 击 了 递减 按钮 。 由 于 响应 用 户 的 交互 是 高 优先 级 的 ， 因 此 React 会 先 
调用 decrement() 方 法 。 此 时 state 中 的 值 仍 然 是 125。 因 此 , 在 我 们 将 另 一 个 状态 更 新 插入 队列 时 ， 
会 再 次 将 值 设置 为 124。 

React 接着 会 提交 两 个 状态 更 新 。 令 我 们 精明 且 人 敏捷 的 用 户 失 望 的 是 ， 应 用 程序 显示 的 不 是 正太 
的 123， 而 是 124。 

在 我 们 的 简单 示例 中 ， 这 个 bug 发 生 的 可 能 性 很 小 。 但 随 着 React 应 用 程序 的 复杂 性 不 断 增 加 ， 
React 可 能 会 遇 到 高 优先 级 工作 〈 如 动画 ) 过 载 的 情况 。 可 以 想象 ， 状 态 更 新 可 能 会 排队 等 待 相应 的 
时 间 长 度 。 


每 当 状 态 转 换 依赖 于 当前 状态 时 ,使 用 函数 来 设置 状态 有 助 于 避免 发 生 这 种 神秘 的 bug。 


有 关 此 主题 的 进一步 阅读 ， 请 参阅 Medium 网 站 Sophia Shoemaker 的 帖子 “Using a 
Function in setState Instead of an Object” 。 


5.8.4 ”关于 状态 的 思考 
在 应 用 程序 中 传播 状态 会 让 我 们 很 难 去 推断 组 件 的 演 染 结果 。 在 构建 有 状态 的 组 件 时 ,我 们 应 该 
知道 需要 在 状态 中 放 什 么 以 及 为 什么 要 使 用 状态 。 
通常 ， 我 们 希望 将 应 用 程序 中 保持 组 件 本 地 状态 的 组 件数 量 最 小 化 。 
如 果 有 一 个 组 件 ， 它 具有 以 下 的 UI 状态: 
(1) 不 能 从 外 部 “获取 ”; 
(2) 无 法 传递 到 此 组 件 中 
通常 这 就 是 将 状态 构建 到 组 件 中 的 情况 。 
然而 , 任何 可 以 通过 props 或 其 他 组 件 传人 的 数据 通常 来 说 最 好 保持 不 变 。 唯 一 应 该 放 入 状态 
的 信息 是 一 些 未 计算 的 值 ， 且 它们 不 需要 在 应 用 程序 中 同步 。 
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决定 是 否 将 状态 置 于 组 件 中 与 “面向 对 象 编程 ” “函数 式 编程 ”之 间 的 关系 密切 相关 。 
在 函数 式 编程 中 ， 如 果 有 一 个 纯 函数 ， ee ， 对 于 给 定 的 输入 集 总 
十 二 加 相同 中 信 。 这 使 得 纯 函 数 的 行为 易于 推断 ， 因 为 对 于 相同 的 输入 ， 输出 始终 是 一 致 的 。 
在 面向 对 象 编程 中 ,你 可 以 有 一 些 对 象 并 能 在 对 象 中 保持 状态 。 然 后 ， 对 象 的 状态 成 为 对 象 上 
方法 的 隐 式 参数 。 因 为 状态 可 以 改变 ， 所 以 在 程序 的 不 同时 间 使 用 相同 的 参数 调用 相同 的 函数 ， 可 
以 返回 不 同 的 答案 。 
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这 与 React 组 件 中 的 props 和 state 相关 ，, 因为 你 可 以 将 props 视 为 组 件 的 “参数 ”, 将 state 
视 为 对 象 的 “实例 变量 ”。 

如 果 组 件 仅 使 用 props 来 配置 组 件 ( 并 且 它 不 使 用 state 或 任何 其 他 外 部 变量 )， 那 么 我 们 可 
以 轻松 预测 特定 组 件 的 泻 染 结果 。 

但 是 , 如果 我 们 使 用 可 变 的 组 件 本 地 状态 , 那么 就 很 难 推断 出 组 件 在 特定 时 间 会 浑 染 什么 内 容 。 

因此 ， 虽 然 通过 状态 传递 “ 隐 式 参数 ”很 方便 ， 但 也 会 使 系统 变 得 难以 推理 。 

也 就 是 说 , 状态 是 无 法 完全 避免 的 。 举 个 例子 , 现实 世界 中 有 一 个 状态 : 当 你 按 一 个 电灯 开关 ， 
世界 就 改变 了 。 因 此 程序 必须 能 够 处 理 状态 才能 在 现实 世界 中 运行 。 


好 消息 是 , 现在 已 出 现 了 各 种 各 样 的 工具 和 模式 来 处 理 React 中 的 状态 ( 尤其 是 Flux 及 其 变 体 )， 
我 们 会 在 本 书 的 其 他 地 方 讨论 。 你 应 该 遵循 的 经 验 法 则 是 尽 可 能 将 具有 状态 的 组 件数 量 最 小 化 。 














保持 状态 通常 有 利于 强制 执行 和 维护 一 致 的 UT， 否则 UI 不 会 更 新 。 此 外 ， 还 有 一 件 事 要 记 住 ， 
就 是 我 们 应 该 尽量 减少 放 入 状态 中 的 信息 量 。 保 存 的 信息 量 越 小 、 越 可 序列 化 ( 即 可 以 轻松 地 将 其 转 
换 为 JSON )， 则 效果 越 好 。 这 是 因为 这 样 使 得 应 用 程序 不 仅 会 更 快 ， 而 且 更 容易 被 推断 。 然 而 ， 当 状 
态 变 得 庞大 且 无 法 管理 时 ， 这 通常 是 危险 信号。 
可 以 缓解 和 最 小 化 复杂 状态 的 一 种 方法 是 ， 使 用 多 个 无 状态 组 件 〈 不 保存 状态 的 组 件 ) 组 成 一 个 
有 状态 组 件 来 构建 应 用 程序 。 
































































































































5.9 无 状态 组 件 
构建 有 状态 组 件 的 另 一 种 方法 是 使 用 无 状态 组 件 。 无 状态 组 件 是 轻 量 级 组 件 ， 不 需要 对 组 件 进行 

任何 特殊 处 理 。 
无 状态 组 件 是 React 构建 只 需要 render() 方 法 的 组 件 的 轻 量 级 方法 。 
让 我 们 看 一 个 无 状态 组 件 的 示例 : 


advanced-components/components-cookbook/src/components/Header/StatelessHeader.js 




















const Header = function(props) { 
return (<h1i>{props.headerText}</h1>) 
} 











请 注意 ， 我 们 在 访问 props 时 并 没有 引用 this ， 因 为 它们 只 是 被 传递 到 函数 中 。 这 里 的 无 状态 
组 件 实际 上 并 不 是 一 个 类 ， 因 为 它 不 是 一 个 ReactElement。 


在 使 用 无 状态 的 函数 式 组 件 时 ， 我 们 不 会 引用 this。 这 是 因为 它们 只 是 函数 ,没有 支撑 实例 
( backing instance )。 这 些 组 件 不 能 包含 状态 ， 也 不 会 被 普通 的 组 件 生命 周期 方法 调用 。 
React 允许 我 们 在 无 状态 组 件 上 使 用 propTypes 和 defaultProps。 
无 状态 组 件 有 这 么 多 限制 ， 为 什么 还 要 使 用 它 呢 ? 有 两 个 原因 。 
首先 ， 如 上 所 述 ， 有 状态 组 件 通 常会 在 整个 系统 中 传播 复杂 性 。 尽 可 能 使 用 无 状态 组 件 可 以 帮助 
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应 用 程序 减少 使 用 包含 状态 的 位 置 。 这 使 得 程序 更 容易 推断 。 

其 次 ,使 用 函数 式 组 件 可 以 提高 性 能 。 因 为 组 件 设置 和 拆 印 的 “仪式 ” 较 少 。React 核心 团队 已 

经 提 到 ， 未 来 可 能 会 为 函数 式 组 件 引 入 更 多 的 性 能 改进 。 
一 个 好 的 经 验 法 则 是 尽 可 能 多 地 使 用 无 状态 组 件 。 如 果 我 们 无 须 任何 生命 周期 方法 ， 只 需要 一 个 

泻 染 函 数 ， 那 么 使 用 无 状态 组 件 是 一 个 很 好 的 选择 。 


5.9.1 切换 到 无 状态 
可 以 将 上 面 的 Switch 组 件 转换 为 无 状态 组 件 吗 ? 可 以 ， 不 过 当前 选择 的 支付 选项 是 一 个 状态 ， 
因此 必须 把 它 放 在 某 个 地 方 。 
虽然 无 法 完全 消除 状态 ， 但 至 少 可 以 隔离 它 。 这 是 React 应 用 程序 中 的 常见 模式 : 尝试 将 状态 放 
到 几 个 父 组 件 中 。 
在 Switch 组 件 中 ,可 以 将 每 个 选项 放 到 renderChoice 函数 中 。 这 表明 它 是 一 个 很 好 的 候选 对 象 ， 
可 以 将 其 拖 放 到 自己 的 无 状态 组 件 中 。 但 有 一 个 问题 : renderChoice 是 调用 select 的 函数 ， 这 意味 
着 它 是 间接 调用 setState 的 函数 。 下 面 来 看 如 何 处 理 这 个 问题 


advanced-components/components-cookbook/src/components/Switch/steps/Switch6.js 
















































































































































































const Choice = function (props) { 
const cssClasses = []; 


if (props.active) { 
// 〈-- 检查 props， 而 不 是 state 
cssClasses.push(styles.active); 


} 


return ( 
<div 
className='choice’ 
onClick={props .onClick} 
className={cssClasses} 
> 
{props.label} {/* <-- 允许 显示 任何 label */} 


这 里 创建 了 choice 函数 ， 它 是 无 状态 组 件 。 SR 如 果 组 件 是 无 状态 的 ， 那 么 我 们 就 
无 法 从 state 中 读 取 数据 。 该 怎么 办 呢 ? 可 以 通过 props 向 下 传递 参数 。 

在 choice 组 件 中 ,我 们 做 了 三 处 修改 (上面 的 代码 中 用 注释 标记 的 地 方 ): 

(1) 通过 读 取 props .active 的 值 来 判断 这 个 选项 是 否 有 效 ; 

(2) 当 一 个 Choice 组 件 被 点 击 时 ， 就 会 调用 props .onClick 上 的 任何 函数 ; 

(3) 标签 由 props .1abel 决定 。 

所 有 这 些 变化 都 意味 着 Choice 与 Switch 语句 是 解 耦 的 。 现 在 只 要 通过 props 传递 active、 
onClick 和 label 参数 ， 就 可 以 在 任何 地 方 使 用 Choice 组 件 。 

下 面 来 看 这 是 如 何 改变 Switch 组 件 的 : 
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advanced-components/components-cookbook/src/components/Switch/steps/Switch6.js 





render() { 
return ( 
《<div className='switch'> 
<Choice 
onClick={this.select(CREDITCARD)} 
active={this .state.payMethod === CREDITCARD} 
label='Pay with Creditcard' 
1 


<Choice 
onClick={this.select(BTC)} 
active={this.state.payMethod === BTC} 
label='Pay with Bitcoin’' 

人 


Paying with: {this.state.payMethod} 








这 里 使 用 了 Choice 组 件 并 传递 了 onClick、active 和 label 三 个 props (参数 )。 它 的 巧妙 之 处 
在 于 我 们 可 以 很 容易 地 做 到 下 面 的 事项 : 

(1) 通过 修改 onclick 的 输入 来 修改 点 击 此 选项 时 发 生 的 情况 ; 

(2) 通过 修改 active 属性 来 修改 特定 选项 被 视 为 有 效 的 条 件 ; 

(3) 可 以 将 标签 更 改 为 任意 字符 串 。 

通过 创建 这 个 Choice 无 状态 组 件 , 我 们 能 够 让 choice 组 件 变 得 可 重用 , 而 不 是 绑 定 到 任何 特定 


Ex 


的 state 属性 中 。 


5.9.2 ”鼓励 重用 无 状态 组 件 
无 状态 组 件 是 创建 可 重用 组 件 的 好 方法 。 因 为 无 状态 组 件 需 要 从 外 部 传递 所 有 配置 ， 所 以 只 要 提 
供 了 正确 的 挂钩 ， 就 几乎 可 以 在 任何 项 目 中 重用 无 状态 组 件 。 
现在 已 介绍 了 props 、context 和 state， 接 下 来 将 介绍 一 些 可 以 与 组 件 一 起 使 用 的 更 高 级 的 特性 。 
组 件 存在 于 层次 结构 中 , 有 时 我 们 需要 与 子 组 件 通信 或 操作 子 组 件 。 下 一 节 将 讨论 如 何 做 到 这 一 点 。 
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5.10 使 用 props .children 与 子 组 件 对 话 

虽然 我 们 通常 自己 指定 props， 但 React 为 我 们 提供 了 一 些 特殊 的 props。 在 组 件 中 ， 可 以 使 用 
this.props.children 来 引用 树 中 的 子 组 件 。 

例如 有 一 个 包含 Article 组 件 的 Newspaper 组 件 : 


advanced-components/components-cookbook/src/components/Article/Newspaper.js 














const Newspaper = props => { 
return ( 
<Container> 
<Article headline="An interesting Article"> 
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Content Here 
</Articley 
</Container> 
) 
} 


此 容器 组 件 只 包含 一 个 Article 子 组 件 。Article 组 件 包 含 了 多 少 个 子 级 呢 ?” 它 包含 一 个 子 级 ， 
即 文本 “Content Here”。 


在 Container 组 件 中 ， 假 设 我 们 想 要 对 Article 组 件 渔 染 的 内 容 添 加 标记 代码 。 为 此 ， 需 要 在 
Container 组 件 中 编写 JSX， 然 后 放 和 人 this.props.children: 























advanced-components/components-cookbook/src/components/Article/Container.js 





class Container extends React.Component { 
render() { 
return <div className="container">{this.props.children}</div»; 


} 














Container 组 件 将 创建 一 个 带 有 class='container' 的 div， 日 此 React 树 的 子 元 素 将 在 该 div 
中 泻 染 。 

一 般 来 说 ， 如 果 有 多 个 子 组 件 ，React 会 将 this.props.childqren 属性 作为 组 件 列表 传递 ， 而 如 
果 只 有 一 个 组 件 ， 则 传递 单个 元 素 。 
既然 已 经 知道 this.props.children 是 如 何 工作 的 ,那么 我 们 应 该 重 写 前 面 的 Container 组 件 
以 使 用 propTypes 来 记录 组 件 的 API。 我 们 预测 container 组 件 可 能 包含 多 个 Article 组 件 , 但 它 也 
可 能 只 包含 一 个 Article 组 件 。 因 此 我 们 指定 children 属性 既 可 以 是 一 个 元 素 又 可 以 是 数组 。 
























































如 果 你 对 PropTypes .oneOfType 不 熟悉 ， 请 参阅 附录 A， 它 解释 了 PropTypes. 
oneOfType 的 工作 原理 。 


advanced-components/components-cookbook/src/components/Article/DocumentedContainer.js 





class DocumentedContainer extends React.Component { 
static propTypes = { 
children: PropTypes.oneOf( [PropTypes.element, PropTypes.array]) 
}3 
J i 
render() { 
return <div className="container">{this.props.children}</div»; 
} 
} 











每 次 我 们 想 要 在 组 件 中 使 用 children 属性 时 ， 都 要 检查 它 是 什么 类 型 ， 这 会 变 得 很 麻烦 。 可 以 
通过 以 下 两 种 方式 来 处 理 这 个 问题 。 

(1) 要 求 children 属性 是 单个 子 元 素 ( 例如 将 子 元 素 包 右 在 它们 自己 的 元 素 中 )。 

(2) 使 用 React 提供 的 Children 帮助 程序 。 

第 一 个 方法 很 简单 ， 它 要 求 子 元 素 是 单一 元 素 。 因 此 可 以 将 上 面 的 子 元 素 设 置 为 单个 元 素 ， 而 不 
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是 定义 成 one0OfType( )。 


advanced-components/components-cookbook/src/components/Article/SingleChildContainer.js 





class SingleChildContainer extends React.Component { 
static propTypes = { 
children: PropTypes.element.isRequired 
上 
ye 
render() { 
return <div className="container">{this.props.children}</div»; 
} 
} 











在 SingleChildContainer 组 件 中 ,需要 始终 能 保证 将 子 组 件 演 染 为 层次 结构 中 的 单个 叶子 组 件 。 


第 二 种 方法 是 使 用 React .Children 实用 的 帮助 程序 来 处 理子 组 件 。 处 理子 组 件 的 辅助 方法 有 很 
多 ， 下 面 来 看 一 下 。 

















5.10.1 React.Children.map() 和 React.Children.forEach() 方 法 


对 子 组 件 使 用 的 最 常见 的 操作 是 映射 它们 的 列表 。 我 们 经 常 使 用 map( ) 方 法 在 子 组 件 上 调用 
React .cloneElement() 或 React .createElement() 方 法 。 





























@ map( ) 和 forEach( ) 函数 
map() 和 forEach( ) 函 数 对 和 迭代 器 ( 对 象 或 数组 ) 中 的 每 个 元 素 都 会 执行 一 次 所 提供 
的 函数 。 
[1，2，3].forEach(function(n) { 
console.1og("The number is: " + nN); 
return n; // 我 们 不 会 看 到 这 个 
}) 
[1, 2, 3] .map(function(n) { 
console.1og("The number is: " + nN); 
return n; // 我 们 会 得 到 这 些 
}) 
map( ) 和 forEach( ) 函 数 的 区 别 在 于 ，map() 的 返回 值 是 回调 函数 结果 的 数组 ， 而 
forEach( ) 不 收集 结果 。 


因此 在 这 个 例子 中 ,虽然 map() 和 forEach() 函 数 都 会 打印 console.1og 中 的 语句 ， 
但 map() 函数 将 返回 数组 [1,2,3] ， 而 forEach( ) 函 数 则 不 会 。 

















下 面 重 写 前 面 的 container 组 件 ,以 便 为 每 个 子 组 件 提供 一 个 可 配置 的 包装 组 件 。 有 这 个 想法 是 
因为 这 个 组 件 需 要 : 

(1) 一 个 component 属性 ， 它 将 包装 每 个 子 组 件 ; 

(2) 一 个 children 属性 ， 它 是 我 们 要 包装 的 子 组 件 列 表 。 

为 此 ， 我 们 调用 React .createElement( ) 方 法 为 每 个 子 组 件 生成 一 个 新 的 ReactElement : 
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advanced-components/components-cookbook/src/components/Article/MultiChildContainer.js 





class MultiChildContainer extends React.Component { 
static propTypes = { 
component: PropTypes.element.isRequired, 
children: PropTypes.element.isRequired 
上 
ae 
renderChild = (childData, index) => { 
return React.createElement( 
this.props.component, 
{}，// 《~ 子 元 素 的 props 
childData // <~ 子 元 素 的 children 


} 
Ys ea 
render() { 
return ( 
<div className="container"> 
{React .Children.map(this.props.children, this.renderChild)} 
</div> 
3 
} 
} 








重申 一 下 , React .Childqren.map() 和 React.Childqren.forEach() 函 数 之 间 的 区 别 在 于 前 者 会 创 
建 一 个 数组 并 返回 每 个 函数 执行 后 的 结果 ， 而 后 者 不 会 。 在 泻 染 一 个 子 集合 时 ,我 们 主要 使 用 .map() 
函数 。 












































5.10.2 React.Children.toArray() 函数 


props.children 会 返回 一 个 比较 难处 理 的 数据 结构 。 通 常 在 处 理子 元 素 时 ， 我 们 想 要 把 
props.children 对 象 转 换 为 常规 数组 , 例如 当 我 们 想 要 重新 排列 子 元 素 的 顺序 时 。React .Children . 
toArray() 国 数 可 以 把 props.children 的 数据 结构 转换 为 子 元 素 的 数组 。 


advanced-components/components-cookbook/src/components/Article/ArrayContainer.js 



































class ArrayContainer extends React.Component { 
static propTypes = { 
component: PropTypes.element.isRequired, 
children: PropTypes.element.isRequired 
把 
OA 
render() { 
const arr = React.Children.toArray(this.props.children); 


return <div className="container">{arr.sort((a, b) => a.id «< b.id)}</div»; 


} 
} 
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5.11 总 结 











通过 使 用 props 和 context， 可 以 将 数据 放 入 组 伯 
的 数据 是 什么 。 




















; 通过 使 用 PropTypes ， 可 以 明确 指出 需要 











通过 使 用 state， 可 以 保留 组 件 本 地 数据 ， 并 告诉 组 件 在 状态 发 生变 化 时 需要 重新 泻 染 ， 但 状态 
可 能 很 坏 手 ! 最 小 化 有 状态 组 件数 量 的 一 种 技术 是 使 用 无 状态 的 函数 式 组 件 。 














可 以 使 用 这 些 工 具 创建 强大 的 交互 式 组 件 。 然 而 , 有 一 组 重要 的 配置 还 没有 讨论 : 生命 周期 方法 。 
像 componentDidMount() 和 componentDidUpdate( ) 这 样 的 生命 周期 方法 提供 了 进入 应 用 程序 过 


程 的 强大 Hook。 下 一 章 将 深入 研究 组 件 的 生命 周期 ， 并 


部 API 以 及 构建 复杂 的 组 件 。 


5.12 参考 文献 


@ React 网 站 的 文档 “React Top-Level API Docs”。 
@ React 网 站 的 文档 “React Component API Docs” 
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展示 如 何 使 用 这 些 Hook 来 验证 表单 ， 挂钩 外 
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6.1 表单 101 


表单 是 应 用 程序 中 最 重要 的 部 分 之 一 。 虽 然 通过 点 击 和 鼠标 移动 可 以 获得 一 些 交 互 ， 但 实际 上 通 
过 表单 ， 我 们 才能 从 用 户 那 里 获得 大 部 分 丰富 的 输入 。 
从 某 种 意义 上 说 , 表单 就 像 是 橡胶 轮胎 遇 上 道路 一 样 恰如其分 。 用 户 可 以 通过 表单 添加 支付 信息 、 
搜索 结果 、 编 辑 个 人 资料 、 上 传 照片 或 发 送 消息 。 表 单 把 Web 站 转换 成 了 Web 应 用 程序 。 
表单 可 能 看 起 来 很 简单 。 你 真正 需要 的 只 是 一 些 input 标签 和 一 个 包含 在 form 标签 中 的 submit 
标签 。 然 而 ， 创 建 一 个 丰富 、 交 互 式 且 易于 使 用 的 表单 通常 涉及 大 量 的 编程 。 
表单 输入 会 修改 页 面 和 服务 器 上 的 数据 。 
数据 变化 通常 必须 与 页 面 上 其 他 位 置 保持 同步 。 
用 户 可 以 输入 无 法 预测 的 值 ， 有 些 值 我 们 希望 直接 修改 或 者 立即 拒绝 。 
在 验证 失败 的 情况 下 ，UI 需 要 清楚 地 说 明 所 期 望 的 数据 和 错误 信息 。 
字段 可 以 相互 依赖 ， 并 且 具 有 复杂 的 逻辑 。 
表单 中 收集 的 数据 通常 会 异步 发 送 到 后 端 服务 器 ， 我 们 需要 让 用 户 知道 发 生 了 什么 。 
我 们 希望 能 够 测试 表单 。 
如 果 这 上 听 起 来 吓人 ， 请 不 要 担心 ! 这 正 是 React 被 创造 出 来 的 原因 : 处 理 需 要 在 Facebook 上 构建 
的 复杂 表单 。 
我 们 将 通过 构建 一 个 注册 应 用 程序 来 探索 如 何 使 用 React 来 应 对 这 些 挑战 。 我 们 会 从 简单 开始 ， 
并 在 每 个 步骤 中 添加 更 多 功能 。 


6.1.1 准备 
下 载 本 书 代码 ， 导 航 到 forms 目录 : 


$ cd forms 
该 文件 夹 包含 了 本 章 所 有 的 代码 示例 。 要 在 浏览 器 中 查看 它们 , 请 运行 npm install( 简写 为 npm i ) 
来 安装 依赖 项 : 


$ npm i 
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完成 后 ， 可 以 使 用 npm start 启动 应 用 程 





$ npm start 


你 应 该 会 在 终端 中 看 到 以 下 内 容 : 


$ npm start 

Compiled successfully! 

The app is running at: 
http://localhost:3000/ 





如 果 现 在 在 浏览 器 中 输入 http://localhost:3000， 你 应 该 可 以 看 到 该 应 用 程序 。 
多 这 个 应 用 程序 由 Create React App 提供 支持 ， 下 一 章 会 介绍 。 


6.1.2 ”基础 按钮 
表单 的 核心 是 与 用 户 对 话 。 字 段 是 应 用 程序 的 问题 ， 而 用 户 输入 的 值 则 是 答案 。 
下 面 问 一 下 用 户 对 React 的 看 法 。 
可 以 向 用 户 显 示 一 个 文本 框 ， 但 我 们 将 从 更 简单 的 开始 。 在 这 个 例子 中 ,我们 会 把 响应 限制 在 两 
个 可 能 的 答案 之 中 。 我 们 想 知道 用 户 认 为 React 是 “Great”( 很 棒 的 ) 还 是 “Amazing”( 令 人 惊讶 的 )， 
最 简单 的 方法 是 给 他 们 两 个 按钮 来 选择 。 
图 6-1 是 第 一 个 例子 。 


























What do you think of React? 


Great Amazing 




















图 6-1 ”基础 按钮 














为 了 让 应 用 程序 达到 这 个 阶段 ,我 们 创建 了 一 个 带 有 render( ) 方 法 的 组 件 ,该 方法 返回 一 个 div， 
1 包含 三 个 子 元 素 : 一 个 用 于 显示 问题 的 nt ; 两 个 用 于 显示 答案 的 button 元 素 。 如 下 所 示 : 


forms/src/01-basic-button.js 











将 




















render() { 
return ( 
<div> 
<h1>What do you think of React?</h1> 


<button 
name= "button=-1 
value="'great' 
onClick={this.onGreatClick} 
> 
Great 
</button> 


<button 
name= 'button-2 
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value='amazing’ 
onClick={this.onAmazingClick} 
Amazing 
</button> 
《</div> 

} 

到 目前 为 止 ， 这 看 起 来 很 像 是 使 用 vanilla HTML 来 处 理 表 单 。 需 要 注意 的 重要 部 分 是 button 元 
素 的 onClick 属性 。 当 一 个 button 被 点 击 时 ， 如 果 它 有 一 个 函数 设置 为 onclick 属性 ， 则 该 函数 会 
被 调用 。 我 们 将 使 用 这 一 行为 来 了 解 用 户 的 答案 。 

要 知道 用 户 的 答案 ,我们 需要 为 每 个 按钮 传递 不 同 的 函数 ,具体 来 说 ,我们 会 创建 onGreatClick() 
函数 并 将 其 提供 给 “Great” 按 钮 ， 创 建 onAmazingClick( ) 函数 并 将 其 提供 给 “Amazing” 按 钮 。 


这 些 函 数 如 下 所 示 : 


forms/src/01-basic-button.js 
















































































onGreatClick = (evt) => { 
console.1og('The user clicked button-1: great', evt); 


}; 


onAmazingClick = (evt) => { 
console.1log('The user clicked button-2: amazing', evt); 


je 





当 用 户 点 击 “Amazing” 按 钮 时 , 会 运行 相关 的 onClick 函数 (本 例 中 是 onAmazingClick( ) 函 数 )。 
相反 ， 如 果 用 户 点 击 “Great” 按 钮 ， 则 会 运行 oncreatClick() 函数 。 
A 请 注意 ,在 onClick 处 理 程序 中 传递 了 this.onGreatClick 而 不 是 this.onGreatClick()。 
有 什么 不 同 呢 ? 
在 第 一 种 情况 下 0 ) 传递 了 onGreatClick 函数 ， 而 在 第 二 种 情况 下 传递 
了 调用 onGreatClick 函数 的 结果 (这 不 是 我 们 现在 想 要 的 )。 
这 变 成 了 应 用 程序 响应 用 户 输 入 的 基础 能 力 。 它 可 以 根据 用 户 的 响应 做 不 同 的 事情 ， 本 例 中 是 将 
不 同 的 消息 记录 到 控制 台 


6.1.3 ”事件 和 事件 处 理 程序 

请 注意 ，onClick 也 数 (onAmazingClick( ) 和 onGreatClick() ) 接收 一 个 evt 参数 。 这 是 因为 
这 些 函 数 是 事件 处 理 程序 。 

在 React 中 人 处 理 表单 的 核心 是 处 理事 件 。 当 我 们 为 元 素 的 onclick 属性 提供 函数 时 ， 该 函数 就 变 
成 了 事件 处 理 程序 。 当 事件 被 触发 时 会 调用 该 函数 ， 该 函数 会 接收 一 个 事件 对 象 作为 参数 。 


在 上 面 的 示例 中 ， 当 button 元 素 被 点 击 时 ， 相 应 的 事件 处 理 函 数 Ce 
onGreatClick() ) 会 被 调用 ， 并 为 其 提供 了 鼠标 点 击 的 事件 对 象 (本 例 中 为 evt )。 这 个 对 象 是 
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SyntheticMouseEvent 。SyntheticMouseEvent 对 象 只 是 一 个 跨 浏览 器 的 包装 器 ， 它 包装 了 浏览 固原 
生 的 MouseEvent 对 象 ， 因 此 你 可 以 像 使 用 原生 DOM 事件 一 样 使 用 它 。 此 外 ， 如 果 你 需要 原始 的 原 
生 事件 ， 可 以 通过 nativeEvent 属性 访问 它 ( 例如 evt .nativeEvent )。 


事件 对 象 包含 了 许多 关于 所 发 生 操作 的 有 用 信息 。 例 如 ，MouseEvent 对 象 让 你 在 点 击 时 能 查看 


鼠标 的 x 和 yy 坐标 ,知道 是 否 按 了 shift 键 ， 并 能 够 获取 被 点 击 的 元 素 的 引用 〈 对 于 此 示例 最 有 用 的 一 
点 ) 下 一 节 将 使 用 这 些 信 息 来 简化 工作 。 


















































相反 ， 如 果 我 们 对 鼠标 移动 感 兴趣 ， 可 以 创建 一 个 事件 处 理 程序 并 将 其 提供 给 
onMouseMove 属性 。 实际 上 , 这 样 的 元 素 属性 还 有 很 多 : onClick、onContextMenu、 
onDoubleClick、 onDrag、 onDragEnd、onDragEnter、onDragExit、onDragLeave、 
onDragOver、onDragStart、 onDrop、 onMouseDown、 onMouseEnter. onMouseLeave.、 
onMouseMove、onMouseOut 、onMouseOver 和 onMouseUp 等 。 
— 些 只 是 鼠标 事件 。 其 实 还 有 剪贴 板 、 合 成 、 键 盘 、 人 焦点、 表单、 选择 、 触 摸 、 
TI、 滚轮 、 媒 体 、 图 像 、 动 画 和 过 渡 事 件 组 。 每 个 组 都 有 自己 的 事件 类 型 ， 并 不 是 
mW 例如 ,这 里 我 们 主要 使 用 onChange 和 onSubmit 表单 事 
件 ， 它 们 与 form 和 input 元 素 相关 。 


有 关 React 中 事件 的 更 多 信息 , 请 参阅 React 关于 事件 系统 的 文档 “SyntheticEvent”。 


6.1.4” 回 到 按钮 


在 上 一 节 ， 我 们 能 够 根据 用 户 的 操作 执行 不 同 的 函数 ( 记录 不 同 的 消息 )， 但 需要 为 每 个 操作 都 
创建 一 个 单独 的 函数 。 相 反 ， 如 果 我 们 为 两 个 按钮 提供 相同 的 事件 处 理 程序 ， 并 使 用 事件 本 身 的 信息 
来 确定 响应 的 内 容 ， 就 会 更 加 清晰 。 

为 此 , 我 们 将 两 个 事件 处 理 程序 oncreatClick() 和 onAmazingCclick() 蔡 换 为 一 个 新 的 事件 处 理 
程序 onButtonClick( ) : 


















































forms/src/02-basic-button.js 





onButtonClick = (evt) => { 
const btn = evt.target; 
console.1log(“The user clicked ${btn.name}: ${btn.value}.); 


二 











点 击 处 理 函 数 接收 一 个 evt 事件 对 象 。evt 对 象 有 一 个 target 属性 ， 它 是 对 用 户 点 击 的 按钮 的 
引用 。 这 样 我 们 就 可 以 访问 用 户 点 击 的 按钮 ， 而 无 须 为 每 个 按钮 都 创建 函数 。 然 后 ， 可 以 针对 不 同 的 
用 户 行为 输出 不 同 的 消息 。 


接 下 来 需要 更 新 render() 本 数 ， 以 便 button 元 素 能 使 用 相同 的 事件 处 理 程序 ， 即 新 的 
onButtonClick() 函 数 ， 见 图 6-2。 




















forms/src/02-basic-button.js 





render() { 
return ( 
<div> 
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); 
} 


<h1>wWhat do you think of React?</h1> 


<button 
name= "button=-1 
Value= 'great 
onClick={this.onButtonClick} 
> 
Great 
</button> 


<button 
name= 'button-2 
Value= amazing 
onClick={this.onButtonClick} 
> 
Amazing 
</button> 


《</div> 
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Cs © 口 192.168.2.18:9966/#/2 
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What do you think of 
React? 


Great [amazng) 


<TOC> 











6-2 ”两 个 按钮 都 使 











] 同 一 个 事件 处 理 程序 











通过 利用 事件 对 象 和 共享 事件 处 理 程序 ， 我 们 可 以 添加 100 个 新 按钮 ， 而 无 须 对 应 用 程序 进行 任 
何其 他 修改 。 


6.2 文本 输入 


在 前 面 的 示例 中 ， 我 们 将 用 户 的 响应 限制 为 两 种 可 能 性 之 一 。 现 在 我 们 知道 了 如 何 利用 React 中 
的 事件 对 象 和 处 理 程序 ， 下 面 将 接受 范围 更 广 的 响应 ， 并 讨论 表单 更 典型 的 用 法 : 文本 输入 。 
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为 了 显示 文本 输入 ,我 们 将 创建 一 个 “Sign Up Sheet”( 注册 表 ) 应 用 程序 。 这 个 应 用 程序 的 目的 





是 允许 用 户 记录 想 要 注册 活动 的 人 员 名 单 。 


此 应 用 程序 会 向 用 户 显示 一 个 文本 框 ， 用户 可 以 在 其 中 输入 一 个 名 字 并 点 击 “Submit”。 当 他 们 
输入 一 个 名 字 后 ， 该 名 字 会 添加 到 一 个 列表 中 ， 这 个 列表 会 立即 显示 出 来 ， 接 着 文本 框 会 被 清空 ， 这 

















样 他 们 就 可 以 输入 一 个 新 的 名 字 了 。 
如 图 6-3 所 示 。 





Sign Up Sheet 


David Guttman| 





Submit 
Names 


® Nate Murray 
® AriLerner 

















图 6-3 ”注册 信息 添加 到 列表 中 


6.2.1 使 用 refs 访 问 用 户 输 入 








我 们 希望 能 够 在 用 户 提交 表单 时 读 取 文 本 字段 的 内 容 。 一 种 简单 的 方法 是 等 待 用 户 提交 表单 ， 接 


着 在 DOM 中 找到 该 文本 字段 ， 最 后 再 获取 它 的 值 。 


首先 需要 创建 一 个 包含 两 个 子 元 素 的 表单 元 素 : 一 个 文本 输入 字段 和 一 个 提交 按钮 ， 如 下 代码 


所 示 。 


forms/src/03-basic-input.js 





render() { 
return ( 
<div> 
<h1>Sign Up Sheet/h1> 


<form onSubmit={this.onFormSubmit}> 
<input 
placeholder= 'Name 
ref='name’ 


/> 


<input type='submit' /> 
</ form> 
/divy 
3 
} 





这 与 前 面 的 示例 非常 相似 , 但 不 同 的 是 现在 已 经 不 是 两 个 button 元 素 , 而 是 一 个 form 元 素 并 带 


有 两 个 子 元 素 : 一 个 文本 字段 和 一 个 提交 按钮 。 
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有 两 点 需要 注意 : 我 们 首先 在 form 元 素 中 添加 了 一 个 onSubmit 事件 处 理 程序 ; 其 次 为 文本 字段 























提供 了 一 个 ref 属性 ('name' )。 











通过 在 form 元 素 上 使 用 onSubmit 事件 处 理 程序 , 这 个 示例 的 行为 将 与 以 前 略 有 不 同 。 其 中 一 个 











变化 是 当 form 元 素 有 焦点 时 ， 可 以 通过 点 击 “Submit” 按 钮 或 按 下 回 车 键 来 调用 处 型 

















制 让 用 户 点 击 “Submit” 按 钮 会 更 加 友好 一 些 。 





E 程 序 。 这 比 强 





但 因为 事件 处 理 程序 与 form 元 素 绑 定 ， 因 此 与 前 一 个 示例 相 比 ， 该 处 理 程序 的 事件 对 象 参 数 就 
没有 那么 有 用 了 。 在 此 之 前 , 我 们 能 够 使 用 事件 的 target 属性 引用 button 元 素 并 获取 其 值 。 而 这 一 
次 我 们 感 兴 趣 的 是 文本 字段 的 值 。 一 种 选择 是 使 用 该 事件 的 target 属性 来 引用 form 元 素 , 并 从 中 找 














到 我 们 感 兴趣 的 input 子 元 素 , 但 有 一 种 更 简单 的 方法 。 











在 React 中 ， 如 果 想 要 轻松 访问 组 件 中 的 DOM 元 素 ， 可 以 使 用 refs (references )。 我 们 之 前 为 
文本 字段 添加 了 一 个 ref 属性 ('name' )。 稍 后 当 onSubmit 处 理 程序 被 调用 时 ， 我 们 能 够 通过 访问 























this.refs .name 来 获得 对 该 文本 字段 的 引用 。onFormSubmit( ) 事 件 处 理 程序 就 像 下 面 这 样 : 





forms/src/03-basic-input.js 








onFormSubmit = (evt) => { 
evt .preventDefault(); 
console.1log(this.refs.name.value); 


je 





在 onSubmit 处 理 程序 中 使 用 preventDefault() 方 法 来 防止 浏览 器 会 默认 提交 表单 


的 操作 。 


如 你 所 见 , 通 过 使 用 this .refs .name ,我 们 获得 了 对 文本 字段 元 素 的 引用 ,并 可 以 访问 它 的 value 








属性 ( 见 图 6-4 )。 该 value 属性 包含 输入 字段 中 的 文本 。 





O00 Nbo x Fullstack React 


€ 3C (192.168.2.18:9966/#/3 ~ 


Sign Up Sheet Q tp w @ Presevelog 
DaveGunman Som 





图 6-4 ”记录 名 字 
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我 们 虽然 仅 使 用 了 render( ) 和 onFormSubmit() 两 个 函数 ， 但 现在 应 该 能 在 点 击 “Submit” 按 钮 
时 看 到 控制 台中 显示 的 文本 字段 的 值 。 下 一 步 将 获取 该 值 并 将 其 显示 在 页 面 上 。 


6.2.2 ”使 用 用 户 的 输入 

现在 已 展示 了 我 们 可 以 获取 用 户 提交 的 名 字 , 下 面 可 以 开始 使 用 这 些 信息 来 修改 应 用 程序 的 状态 
和 UI 了 。 

此 示例 的 目的 是 显示 包含 所 有 用 户 输入 的 名 字 列 表 。React 会 让 这 一 切 变 得 简单 。 我 们 将 在 状态 
中 使 用 一 个 数组 来 保存 名 字 ， 并 在 render( ) 方 法 中 使 用 该 数组 来 填充 列表 。 
当 应 用 程序 加 载 时 ， 数 组 将 是 空 的 。 每 次 用 户 提交 一 个 新 名 字 时 ， 我 们 都 会 将 它 添加 到 数组 中 。 
为 此 ， 我 们 将 为 组 件 添加 一 些 内 容 。 
首先 ， 我 们 会 在 状态 中 创建 一 个 names 数组 。 在 React 中 ， 当 我 们 使 用 ES6 组 件 类 时 ， 可 以 通过 
定义 state 属性 来 设置 state 对 象 的 初始 值 。 

如 下 所 示 : 


forms/src/04-basic-input.js 


module.exports = class extends React.Component { 
static displayName = "04-basic-input"; 






























































state = { names: [] }; // <-- 初始 状态 
static 属于 该 类 
A 注意 在 该 组 件 中 的 这 一 行 : 
static displayName = "04-basic-input"; 
这 意味 着 此 组 件 类 具有 一 个 静态 属性 displayName。 若 属性 是 静态 的 ， 则 意味 着 它 
是 一 个 类 属性 (而 不 是 实例 属性 ), 在 本 例 中 , 我们 将 在 演示 清单 页 面 上 显示 示例 列 


表 时 使 用 这 个 displayName 属性 。 
接 下 来 需要 修改 render( ) 方 法 来 显示 此 列表 。 在 form 元 素 下 面 ， 我 们 将 创建 一 个 新 的 div。 这 
个 新 的 div 容器 将 包含 一 个 标题 (h3 ) 和 名 字 列 表 ， 该 列表 由 一 个 ul 父 元 素 组 成 ， 每 个 名 字 都 是 一 
个 1i 子 元 素 。 下 面 是 更 新 后 的 render( ) 方 法 : 


forms/src/04-basic-input.js 























render() { 

return ( 

<div> 
<h1>Sign Up Sheet/h1> 


<form onSubmit={this.onFormSubmit}> 
<input 
placeholder='Name' 
ref='name’ 


js 


<input type='submit' /> 


146 第 6 章 表单 





</ form> 


<div> 
<h3>Names</h3> 
<U1> 

{ this.state.names.map((name, i) => 《li key={i}>{name}</1i>) } 

</ul> 

</div> 

</div> 
) ; 
} 





ES2015 提供 了 一 种 简洁 的 方式 来 搬入 1i 子 元 素 。 由 于 this.state.names 是 一 个 数组 ， 因 此 我 
们 可 以 利用 它 的 map() 方 法 为 数组 中 的 每 个 名 字 返 回 一 个 1i 子 元 素 。 此 外 , 对 于 map() 方 法 中 的 迭代 
函数 ， 可 以 通过 使 用 “箭头 ” 话 法 在 不 显 式 使 用 return 的 情况 下 返回 1i 元 素 。 
@ 这 里 妥 注 意 的 另 一 件 事 是 我 们 为 1i 元 素 提供 了 一 个 Key 属性 。 当 我 们 在 数组 或 迁 
代 器 中 有 子 项 时 (如 上 所 示 )，React 推荐 每 个 子 项 都 设置 一 个 key 属性 。React 通过 
此 信息 能 够 跟踪 子 元 素 ， 并 确保 它 在 泻 染 过 程 中 可 以 重复 使 用 。 
我 们 不 会 在 这 里 删除 或 重新 排序 列表 ， 因 此 知道 通过 索引 来 标识 每 个 子 元 素 就 足够 
了 。 如 果 我 们 想 优化 更 复杂 用 倒 的 泻 染 ， 可 以 为 每 个 名 字 分 配 一 个 不 可 变 的 id， 这 
个 id 不 与 每 个 名 称 的 值 或 数组 的 顺序 绑 定 。 这 将 允许 React 可 以 重用 元 素 ， 即 使 元 
素 的 位 置 或 值 发 生 了 变化 。 
更 多 信息 ， 请 参阅 React 网 站 关于 多 个 组 件 和 动态 子 级 的 文档 “Composition vs 
Inheritance” 。 


现在 render() 方 法 已 更 新 ，onFormSubmit( ) 方 法 需要 使 用 新 名 字 来 更 新 state。 想 要 将 名 字 添 
加 到 state 中 的 names 数组 里 ,我 们 可 能 会 尝试 this.state.names .push(name) 这 样 的 操作 。 但 是 ， 
React 依赖 于 this.setState() 方 法 来 修改 state 对 象 ， 因 为 它 被 执行 后 会 触发 一 个 新 的 render() 方 
法 调用 。 

正确 的 做 法 如 下 所 示 : 

(1) 创建 一 个 复制 了 当前 names 数组 的 新 变量 ; 

(2) 把 新 名 字 添 加 到 新 数组 中 ; 

(3) 在 调用 this .setState() 方 法 时 使 用 该 变量 。 

我 们 还 需要 清空 文本 字段 ， 以 便 它 可 以 接受 其 他 的 用 户 输入 。 如 果 在 添加 新 名 字 之 前 要 求 用 户 删 
除 别人 的 输入 ， 这 对 用 户 来 说 并 非 非常 友好 。 由 于 我 们 已 可 以 通过 refs 访问 文本 字段 ， 因 此 可 以 将 
其 值 设 置 为 空 字符 串 来 清空 它 。 

现在 onFormSubmit() 方 法 应 该 如 下 所 示 : 

forms/src/04-basic-input.js 


(evt) => { 
this.refs.name.value; 
































































































































onFormSubmit 
const name 
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所 


const names = [ ...this.state.names，name |]; 
this .setState({ names: names }); 
this.refs.name.value = "" 

ev 七 .preventDefault() ; 





























此 时 注册 应 用 程序 才 是 功能 完善 的 。 以 下 是 应 用 程序 流程 的 概述 。 
(1) 用 户 输入 名 字 并 点 击 “Submit” 按 钮 。 

(2) onFormSubmit 函数 被 调用 。 

(3) 使 用 this .refs .name 访问 文本 字段 的 值 (一 个 名 字 )。 

(4) 该 名 字 将 被 添加 到 state 中 的 names 列表 里 。 

(5) 清空 文本 字段 ， 以 便 为 更 多 的 输入 做 准备 。 

(6) render( ) 函数 被 调用 ， 并 显示 更 新 后 的 名 字 列 表 。 
现在 看 起 来 还 不 错 ! 下 一 节 会 进一步 改进 它 。 


6.2.3 


















































非 受 控 组 件 与 受 控 组 件 


前 几 节 利用 refs 来 访问 用 户 的 输入 。 在 创建 render( ) 方 法 时 ,我 们 添加 了 一 个 带 有 ref 属性 的 
input 字段 。 稍 后 ， 我 们 使 用 该 属性 来 获取 演 染 的 input 字段 的 引用 ， 以 便 能 访问 和 修改 它 的 值 。 

我 们 介绍 了 在 表单 中 使 用 refs 属性 ,因为 它 在 概念 上 与 不 使 用 React 的 表单 处 理 方式 类 似 。 但 是 ， 
通过 这 种 方式 使 用 refs 属性 ， 会 放弃 使 用 React 的 主要 优势 。 

在 前 面 的 示例 中 ， 我 们 通过 直接 访问 DOM 来 从 文本 字段 检索 名 字 ， 并 在 用 户 输入 的 名 字 提 交 后 
重 置 字段 来 直接 操作 DOM。 












































使 























用 React， 我 们 不 必 担 心 修 改 DOM 来 匹配 应 用 程序 状态 。 我 们 应 该 只 专注 于 改变 state ， 并 


























依赖 React 的 能 力 来 有 效 地 操纵 DOM 来 匹配 状态 。 这 为 我 们 提供 了 确定 性 ， 对 于 任何 给 定 的 state 


值 ， 我 











门 都 可 以 预测 到 render( ) 方 法 将 返回 什么 ， 从 而 也 能 知道 应 用 程序 会 是 什么 样子 的 。 








在 前 面 的 示例 中 ,文本 字段 被 称 为 “ 非 受 控 组 件 ”。 这 是 React 不 “控制 ” 它 的 泻 染 方式 的 另 一 种 
说 法 ,尤其 是 它 的 值 。 换 句 话 说 ，React 不 干涉 组 件 的 行为 ， 并 允许 它 自由 地 接受 用 户 交 互 的 影响 。 





这 意味 着 即使 知道 应 用 程序 的 状态 也 不 足以 预测 页 面 ( 特别 是 input 字段 ) 的 外 观 。 因 为 用 户 可 以 选择 
在 字段 中 输入 或 者 不 输入 ， 所 以 要 知道 input 字段 的 唯一 方法 是 通过 refs 属性 访问 它 并 检查 它 的 值 。 








































































































还 有 男 一 种 方式 。 通 过 将 该 字段 转换 为 “ 受 控 组 件 ”， 就 可 以 让 React 控制 它 。 它 的 值 总 是 会 由 
render( ) 方 法 和 应 用 程序 的 状态 指定 。 当 我 们 这 样 做 时 , 就 可 以 通过 检查 state 对 象 来 预测 应 用 程序 


的 外 观 


通过 直接 将 视图 绑 定 到 应 用 程序 的 状态 ， 我 们 只 需 做 很 少 的 工作 就 可 以 获得 某 些 特性 。 例 如 ， 假 
设 有 一 个 很 长 的 表单 ， 用 户 必须 通过 填写 许多 input 字段 来 回答 很 多 问题 。 如 果 用 户 中 途 不 小 心 重新 








O 


















































加 载 了 页 面 ,那么 通常 所 有 的 这 些 字段 都 会 被 清空 。 但 如 果 这 些 是 受 控 组 件 ， 且 应 用 程序 的 状态 已 被 
持久 化 到 localStorage 中 ,那么 我 们 就 能 够 准确 地 回 到 用 户 中 断 的 位 置 。 稍 后 将 讨论 受 控 组 件 的 另 
一 个 重要 特性 ， 它 为 组 件 的 验证 铺 平 了 道路 。 
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6.2.4 ”使 用 state 访 问 用 户 输入 


将 非 受 控 的 input 组 件 转换 为 受 控 组 件 需要 做 三 件 事 : 首先 在 state 中 的 某 个 地 方 存储 它 的 值 ; 
其 次 在 state 内 提供 一 个 位 置 作为 它 的 value 属性 ; 最 后 添加 一 个 onChnange 处 理 程序 ， 这 样 就 可 以 
在 state 中 更 新 它 的 值 。 受 控 组 件 的 流程 如 下 所 示 。 

(1) 用 户 输入 或 修改 字段 。 

(2) 使 用 change 事件 来 调用 onchange 处 理 程序 。 

(3) 在 state 中 使 用 event .target .value 来 更 新 input 元 素 的 值 。 

(4) 调用 render( ) 函数 并 使 用 state 中 的 新 值 来 更 新 input 元 素 的 值 。 


将 input 组 件 转换 为 受 控 组 件 后 ，render( ) 函数 的 改动 如 下 所 示 : 


forms/src/0S-state-input.js 

































































render() { 
return ( 
<div> 
<h1i>Sign UP Sheet</h1> 


<form onSubmit={this.onFormSubmit}> 
<input 
Placeholder= 'Name ' 
value={this.state.name} 
onChange={this .onNameChange} 


/> 


<input type='submit' /> 
</ form> 


<div> 
<h3>Names</h3> 
<U1> 

{ this.state.names.map((name, i) => 《li key={i}>{name}</1i>) } 

PAYhid 

</div> 

</div> 
) ; 
} 


唯一 的 区 别 是 我 们 删除 了 input 元 素 的 ref 属性 并 将 其 替换 为 value 和 onChange 属性 。 
既然 input 元 素 是 “ 受 控制 的 "， 那 么 它 的 值 会 始终 被 设置 成 和 state 中 的 一 个 属性 相等 。 在 本 
例 中 ,该 属性 是 name ， 因 此 input 元 素 的 值 就 是 this .state.name。 


虽然 这 不 是 严格 要 求 的 , 但 为 组 件 中 使 用 的 state 的 属性 提供 合理 的 默认 值 是 一 个 好 习惯 。 因 为 
现在 使 用 state.name 作为 input 元 素 的 值 ， 所 以 我 们 希望 在 用 户 有 机 会 提供 一 个 值 之 前 可 以 选 提 
默认 的 值 。 在 本 例 中 ， 我 们 希望 该 字段 为 空 ， 因 此 默认 值 为 一 个 空 字 符 串 ('' )。 
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forms/src/0S-state-input.js 





state = { 

ne [ee 

上 

如 果 我 们 停 在 这 一 步 , 那么 input 元 素 会 被 有 效 地 禁用 。 无 论 用 户 输入 什么 , 它 的 值 都 不 会 改变 。 
有 实 上 如 果 这 样 做 了 ，React 会 在 控制 台中 向 我 们 发 出 警告 。 

为 了 使 input 元 素 变 得 可 操作 ， 我 们 需要 监听 它 的 onchange 事件 并 使 用 它们 来 更 新 state。 为 
此 , 我 们 为 onchange 创建 了 一 个 事件 处 理 程 序 。 此 处 理 程序 负责 更 新 state ， 这 样 state .name 就 会 
随 着 用 户 在 字段 中 输入 的 内 容 而 更 新 。 为 此 ， 我 们 创建 了 onNameChange( ) 方 法 。 

如 下 所 示 : 


forms/src/0S-state-input.js 
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onNameChange = (evt) => { 
this.setState({ name: evt.target.value }); 


}; 

















onNameChange( ) 是 一 个 非常 简单 的 函数 。 就 像 在 前 一 节 中 所 做 的 那样 ,我们 使 用 传递 给 人 处理 程序 
的 事件 来 引用 字段 并 获取 其 值 。 然 后 ， 使 用 该 值 更 新 state .name。 

现在 受 控 组 件 闭环 已 完成 。 用 户 与 该 字段 交互 会 触发 onchange 事件 , 它 会 调用 onNameChange() 
处 理 程序 。onNameChange( ) 处 理 程 序 更 新 state ， 然 后 触发 render( ) 方 法 使 用 新 值 更 新 字段 。 

不 过 ， 应 用 程序 还 需要 再 做 一 次 修改 。 当 用 户 提 交 表 单 时 会 调用 onFormSubmit() 方 法 ,我们 需 
要 该 方法 将 输入 的 名 字 ( state.name ) 添加 到 名 字 列 表 ( state.names ) 中 。 当 我 们 上 次 看 到 
onFormSubmit() 方 法 时 , 它 使 用 this.refs 实现 了 这 一 点 。 因 为 我 们 不 再 使 用 ref， 所 以 需要 修改 该 
方法 ， 如 下 所 示 : 


forms/src/0S-state-input.js 




















































































































onFormSubmit = (evt) => { 

const names = [ ...this.state.names, this.state.name |]; 
this.setState({ names: names, name: '' }); 

evt .preventDefault(); 

二 





请 注意 ， 要 获取 当前 输入 的 名 字 ， 只 需 访 问 this.state.name， 因 为 onNameChange( ) 处 理 程序 
会 不 断 地 更 新 它 。 然 后 将 它 附加 到 名 字 列 表 (this.state.names ) 中 ， 并 更 新 state。 还 需要 清空 
this.state.name， 使 得 该 字段 为 空 并 准备 好 去 接收 新 的 名 字 。 


虽然 应 用 程序 在 本 节 中 没有 获得 任何 新 特性 ， 但 这 已 为 更 好 的 功能 ( 如 验证 和 持久 性 ) 铺 平 了 道 
路 ， 同 时 也 更 充分 地 利用 了 React 范式 。 
6.2.5 ”多 个 字段 

注册 表 看 起 来 还 不 错 ， 但 如 果 要 添加 更 多 字段 会 发 生 什 么 呢 ? 如 果 注 册 表 和 其 他 大 多 数 项 目 一 
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羊 ， 那 么 添加 字段 只 是 时 间 问 题 。 对 于 表单 来 说 ， 我 们 经 常会 想 要 添加 输入 字段 。 

如 果 我 们 继续 使 用 当前 的 方法 去 创建 更 多 的 受 控 组 件 ， 每 个 组 件 都 具有 相应 的 state 属性 和 
onChange 人 处 理 程序 ， 那么 组 件 将 变 得 非常 见长 。 在 输入 、 状 态 和 人 处理 程序 之 间 建 立 一 对 一 的 关系 并 
不 理想 。 

下 面 探索 如 何 修 改 应 用 程序 ， 才 能 以 干净 、 可 维护 的 方式 来 提供 额外 的 输入 。 为 了 说 明 这 一 点 ， 
让 我 们 把 电子 邮件 地 址 添加 到 注册 表 中 。 

前 一 节 中 的 input 字段 在 state 对 象 的 根 节 点 上 有 一 个 专用 属性 。 如 果 我 们 也 这 样 做 , 那么 需要 
添加 另 一 个 属性 :email。 为 了 避免 为 state 对 象 上 的 每 个 输入 都 添加 属性 , 我 们 改 为 添加 一 个 fields 
对 象 来 把 所 有 字段 的 值 存储 在 同一 个 位 置 。 下 面 是 新 state 对 象 的 初始 值 : 


forms/src/06-state-input-multi.js 




























































































state = { 
fields: { 
name: '! 
email: '" 
二 
people: [] 
}; 





这 个 fields 对 象 可 以 存储 任意 数量 的 输入 状态 。 这 里 我 们 指定 了 要 存储 name 和 email 字段 ( 见 
图 6-5 )。 现 在 可 以 在 state.fields.name 和 state.fields.email 中 找到 这 些 值 ， 而 不 是 在 
state.name 和 state.email 中 。 


O00 Nbo < PullsteckR eact 
€ 3C [192.168.2.18:9966/#/6 = 


Sign Up Sheet 
People 


。 Nate (nate@fullstack io) 
Ari (ari@fullstack.io) 





图 6-5 name 和 email 字段 


当然 这 些 值 需 要 由 事件 处 理 程序 更 新 。 我 们 可 以 为 表单 中 的 每 个 字段 创建 一 个 事件 处 理 程序 , 但 
这 会 涉及 大 量 代码 的 复制 和 粘贴 ， 且 会 毫 无 必要 地 让 组 件 变 得 腾 肿 。 它 还 会 使 维护 组 件 变 得 更 难 ， 
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为 任何 对 表单 的 更 改 都 需要 在 多 个 位 置 进 行 。 




















无 须 为 每 个 输入 都 创建 onChange 人 处 理 程序 ， 可 以 只 创建 一 个 方法 来 接收 来 自 所 有 输入 的 修改 习 
件 , 编 写 此 方法 的 诀窍 是 根据 触发 事件 的 input 字段 来 更 新 state 











HH 




















该 方法 使 用 了 event 参数 来 确 
一 个 input 字段 ， 它 的 name 属 怕 
件 字 段 ， 因 为 event .target .name 的 值 就 是 “email”。 








1 下 确 对 应 的 属性 ,要 实现 这 一 点 ， 
定 哪 个 输入 已 被 修改 ， 并 更 新 相应 的 state. fields 对 象 。 比 如 说 ， 有 


设置 为 “email”， 那 么 当 它 触发 事件 时 ， 我 们 就 能 知道 它 是 电子 邮 

















想 知 道 它 是 如 何 实现 的 ， 请 看 下 面 更 新 后 的 render( ) 函数 : 


forms/src/06-state-input-multi.js 





render() { 
return ( 
<div> 
<h1>Sign Up 


Sheet</h1> 


<form onSubmit={this.onFormSubmit}> 


<input 


placeholder="Name" 

name="name" 
value={this.state.fields.name} 
onChange={this .onInputChange} 


fy 


«<input 


placeholder="Email" 
Name="email" 


value={this.state.fields.email} 


onChange={this .onInputChange} 
/> 
<input type="submit" /> 
</ form> 
<div> 
<h3>People</h3> 
<Ul> 


{this.state.people.map(({name, email}, i) => ( 


<11 key= 


{name} 
fli 

))} 

</ul> 

</div> 
</div> 
站 
} 


{i}> 
({email}) 





有 几 点 需要 注意 。 第 








名 一， 我 们 添加 了 第 二 个 input 字段 来 处 理 电 子 邮 件 地 址 。 
第 二 , 我 们 修改 了 input 字段 的 value 所 











性 ， 这 样 就 不 需要 访问 state 对 象 根 节点 上 的 属性 。 访 








三 
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问 state.fields 的 属性 的 方式 已 被 替代 。 查 看 上 面 的 代码 ， 表 示 名 字 的 input 字段 现在 将 其 值 设 置 
为 this.state. fields.name。 

第 三 ， 两 个 input 字段 的 onChange 属性 都 设置 为 相同 的 onInputChange( ) 事 件 处 理 程序 。 下 面 
将 介绍 如 何 把 onNameChange( ) 修 改 为 一 个 更 通用 的 事件 处 理 程序 , 它 可 以 接收 来 自任 何 字 段 的 事件 ， 
而 不 仅仅 是 “name” 字 上 段 。 

第 四 ， 现 在 的 input 字段 有 一 个 name 属性 。 这 和 上 一 点 有 关 。 为 了 让 通用 事件 处 理 程序 
onInputChange( ) 能 够 知晓 更 改 事件 的 来 源 以 及 如 何 将 其 存储 到 状态 中 ( 例如， 如 果 更 改 来 自 属性 名 
为 “email1” 的 input 字段 ， 则 应 将 其 新 值 存储 在 state .fields.email 中 ), 我 们 提供 了 name 属性 ， 
以 便 它 可 以 通过 事件 的 target 属性 来 实现 。 

第 五 ， 我 们 修改 了 人 员 列 表 的 泻 染 方式 。 因 为 它 不 再 仅仅 是 一 个 名 字 列 表 ， 所 以 我 们 修改 了 1i 
元 素 ， 用 来 显示 之 前 的 name 属性 以 及 我 们 即将 拥有 的 新 email 数据 。 

为 了 确保 所 有 数据 都 放 在 正确 的 位 置 ， 我 们 需要 确保 事件 处 理 程序 的 修改 是 恰当 的 。 
onInputChange() 事 件 处 理 程序 (在 任何 字段 的 输入 更 改 时 调用 ) 应 如 下 所 示 : 


forms/src/06-state-input-multi.js 



































































































































































































































onInputChange = evt => { 

const fields = Object.assign({}, this.state.fields); 
fields[evt.target.name] = evt.target .value 
this.setState( {fields}); 


}; 











它 的 核心 思路 与 我 们 在 上 一 节 在 onNameChange( ) 函数 中 所 做 的 类 似 ,但 有 两 个 主要 区 别 : 

(1) 我 们 更 新 的 是 舱 套 在 state 对 象 中 的 值 (例如 ， 更 新 state. fields.email 而 不 是 state .email ); 

(2) 我 们 使 用 evt .target .name 来 通知 state. fields 中 的 哪个 属性 需要 更 新 。 

为 了 能 正确 地 更 新 状态 ， 我 们 首先 获取 了 对 state. fielgds 对 象 的 本 地 引用 ; 然后 使 用 事件 中 的 
信息 (evt .target.name 和 evt.target.value ) 来 更 新 本 地 引用 ; 最 后 使 用 修改 后 的 本 地 引用 来 调 
用 setState( ) 方 法 。 

具体 来 看 如 果 用 户 在 “email1” 字 有 段 中 输入 “someone@somewhere.com” 会 发 生 什么 。 
首先 ，evt 对 象 将 作为 参数 来 调用 onInputChange( ) 方 法 。evt .target .name 的 值 将 是 “email” 
(因为 在 render() 方 法 中 “email” 被 设置 为 它 的 name 属性 )， 而 evt.target.value 的 值 将 是 
“someone@somewhere.com”( 因为 这 是 用 户 输入 该 字段 的 内 容 )。 

接 下 来 ，onInputChange( ) 方 法 将 获取 对 state. fields 对 象 的 本 地 引用 。 如 果 这 是 第 一 次 输入 ， 
那么 state.fields 和 本 地 引用 会 是 state 中 fields 属性 的 默认 值 { name: ''，email: '' }。 接 着 
本 地 引用 会 被 修改 ，fields 属性 值 就 变 成 了 { name: ''，email: "someone@somewhere .com" }。 

最 后 使 用 这 些 更 改 来 调用 setState( ) 方 法 。 

此 时 ,this.state. fields 会 始终 与 input 字段 中 的 文本 保持 同步 , 但 我 们 需要 修改 onFormSubmit() 
方法 ， 才 可 以 将 该 信息 放 人 已 注册 的 人 员 列 表 中 。 下 面 是 更 新 后 的 onFormSubmit( ) 方 法 : 
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onFormSubmit = evt => { 
const people = [...this.state.people, this.state.fields]; 
this.setState({ 
people, 
fields: { 
name: "! 
email: '" 
} 
上 
evt .preventDefault(); 
}; 

















在 onFormSubmit() 方 法 中 , 我 们 首先 获得 已 注册 的 人 员 列 表 ( this.state.people ) 的 本 地 引用 ; 
然后 将 this.state.fields 对 象 ( 它 表示 当前 输入 name 和 email 字段 中 的 对 象 ) 添加 到 people 列 
表 中 ; 最 后 调用 this. a i 同时 通过 将 state. fields 返回 值 设 
置 成 空 的 默认 值 ({ name: ''，email: '' } ) 来 清空 所 有 字段 。 

这 样 做 的 好 处 是 我 们 可 以 很 容易 地 添加 更 多 的 输入 字段 ， 而 只 需要 很 少 的 更 改 。 实 际 上 只 
render() 方 法 需要 修改 。 对 于 添加 一 个 新 字段 , 我 们 所 要 做 的 就 是 再 添加 一 个 input 字段 ,并 修改 列 
表 的 泻 染 方式 以 显示 新 字段 。 

举 个 例子 ， 如 果 我 们 想 要 添加 一 个 电话 号 码 字段 ， 那 么 只 需 添 加 一 个 具有 合适 的 name 和 value 
属性 值 的 新 input 字段 : name 属性 值 会 是 phone ，value 属性 值 会 是 this.state. fields.phone。 
和 其 他 字段 一 样 ，onChange 属性 值 将 是 我 们 现 有 的 onInputchange( ) 处 理 程序 。 

完成 后 ，state 将 自动 跟踪 电话 字段 并 将 其 添加 到 state.people 数组 中 ， 然 后 我 们 可 以 修改 视 
图 显示 信息 的 方式 (例如 使 用 1i )。 

此 时 有 了 一 个 功能 良好 的 应 用 程序 ， 它 可 以 随 着 需求 的 发 展 进行 扩展 和 修改 。 然 而 ， 它 还 缺少 一 
个 大 部 分 表单 需要 的 关键 点 : 验证 。 


6.2.6 ”验证 

验证 对 于 构建 表单 非常 重要 ， 因 此 很 少 有 表单 没有 验证 。 验 证 既 可 以 在 单个 字段 的 级 别 上 进行 
也 可 以 在 整个 表单 上 进行 。 

当 在 单个 字段 上 进行 验证 时 ， 需 要 确保 用 户 输入 的 数据 符合 应 用 程序 对 该 数据 相关 的 期 望 和 约束 。 

举 个 例子 ， 如 果 想 让 用 户 输入 电子 邮件 地 址 ,我 们 就 会 希望 他 们 的 输入 看 起 来 像 有 效 的 电子 邮件 
地 址 。 如 果 输 入 看 起 来 不 像 电 子 邮件 地 址 ， 那 么 他 们 有 可 能 搞 错 了 ， 应 用 程序 很 可 能 会 遇 到 麻烦 ( 例 
如 ， 他 们 无 法 激活 自己 的 账户 )。 其 他 需要 验证 的 常见 示例 包括 : 确保 美国 邮政 编码 恰好 有 5 个 (或 9 
个 ) 数字 字符 ,或 者 强制 密码 至 少 为 某 个 最 小 长 度 。 

而 对 整个 表单 的 验证 会 略 有 不 同 。 这 里 需要 确保 所 有 必 填 的 字段 都 已 输入 了 。 这 里 也 是 检查 内 部 
一 致 性 的 好 地 方 。 例 如 ， 你 有 一 个 订单 表单 ， 其 中 特定 的 产品 需要 特定 的 选项 。 

此 外 ， 对 于 “如 何 ” 及 “ 何 时 ”验证 也 需要 权衡 。 在 某 些 字段 中 ,我 们 可 能 希望 实时 提供 验证 反 
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馈 。 例 如 ， 我 们 可 能 希望 在 用 户 输入 时 显示 密码 强度 ( 通过 查看 长 度 和 使 用 的 字符 )。 但 是 ， 如 果 想 
验证 用 户 名 的 可 用 性 ， 则 需要 等 到 用 户 完成 输入 之 后 再 向 服务 器 或 数据 库 发 出 请 求 来 确定 。 


还 可 以 选择 如 何 来 显示 验证 错误 。 可 以 改变 字段 的 样式 〈 例 如 红色 边框 )， 并 在 字段 附近 显示 文 






























































本 (例如 “请 输入 有 效 的 电子 邮件 ”)， 或 者 禁用 表单 的 提交 按钮 ， 以 防止 用 户 处 理 无 效 信息 。 











对 于 应 用 程序 ， 可 以 从 整个 表单 的 验证 开始 : 


(1) 确保 有 name 和 email 字段 ; 
(2) 确保 电子 邮件 是 有 效 的 地 址 。 


6.2.7 ”在 应 用 程序 中 添加 验证 











为 了 给 注册 应 用 程序 添加 验证 ， 我 们 做 了 一 些 修改 。 概 括 来 说 ， 这 些 变化 如 下 所 示 : 














(1) 在 state 中 添加 一 个 位 置 来 存储 验证 错误 〈 如 果 存 在 的 话 ); 


























(2) 修改 render() 方 法 , 因此 它 会 显示 验证 错误 消息 ( 如 果 存 在 的 话 ), 并 在 每 个 字段 劳 边 显 示 红 








色 文 本 ; 





(3) 添加 一 个 新 的 valigate() 方 法 ,然后 将 fields 对 象 作为 参数 传人 并 返 


对 象 ; 


























回 一 个 fieldErrors 





(4) onFormSubmit( ) 方 法 将 调用 新 的 validate( ) 方 法 来 获取 fielderror 对 象 ， 如 果 有 错误 ， 就 

















会 把 它们 添加 到 状态 中 ( 以 便 它 们 可 以 在 rendqer( ) 中 显示 )， 并 提前 返回 而 不 会 把 











加 到 state.people 列表 中 。 
首先 需要 修改 初始 的 state 对 象 : 


forms/src/07-basic-validation.js 




















“person” 字 上 段 添 





state = { 
fields: { 
name: "! 
email: "" 
} 
fieldErrors: {} 
people: [] 





这 里 唯一 的 变化 是 我 们 已 为 fieldErrors 属性 创建 了 一 个 默认 值 ,我 们 将 在 这 里 存储 每 个 字段 的 











错误 ( 如 果 存 在 的 话 )。 
更 新 后 的 render( ) 方 法 如 下 所 示 : 


forms/src/07-basic-validation.js 








render() { 
return ( 
<div> 
<h1>Sign Up Sheetx</h1> 


<form onSubmit={this.onFormSubmit}> 
<input 
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placeholder="Name" 

name="name" 

value={this.state.fields.name} 

onChange={this .onInputChange} 
/> 


<span style={{color: 'red'}}>»{this.state.fieldErrors.name}</span> 
he 、 六 


“<input 
placeholder="Email" 
name=" email” 
value={this.state.fields.email} 
onChange={this .onInputChange} 
/> 


<span style={{color: 'red'}}>»{this.state.fieldErrors.email}</span> 





<br /> 


<input type="submit" /> 
</ form> 


<div> 
<h3>People</h3> 
<U1》> 
{this .state.people.map(({name，email}，i) => ( 
<1i key={i}> 
{name} ({email}) 
</1i> 
))} 
</ul> 
</div> 
</div> 


); 

















这 里 唯一 的 区 别 是 增加 了 两 个 新 的 span 元 素 ， 每 个 字段 都 有 一 个 。 每 个 span 都 将 在 
state. fieldErrors 中 的 相应 位 置 查找 错误 消息 。 如 果 找 到 错误 , 就 会 在 该 字段 旁边 以 红色 文本 显示 。 
接 下 来 将 介绍 这 些 错误 消息 如 何 写 入 state。 

在 用 户 提交 表单 后 , 我 们 会 检查 其 输入 的 有 效 性 。 因此, 做 验证 的 合适 位 置 是 在 onFormSubmit() 
方法 中 。 但 是 , 我 们 要 为 该 方法 创建 一 个 独立 的 函数 来 调用 。 为 此 我 们 创建 了 纯 函 数 , 即 validate() 
方法 : 


forms/src/07-basic-validation.js 







































































validate = person => { 
const errors = {}; 
if (!person.name) errors.name = 'Name Required'; 
if (!person.email) errors.email = 'Email Required'; 
if (person.email && !isEmail(person.email)) errors.email = 'Invalid Email'; 





return errors; 





validate( ) 方 法 非常 简单 ， 只 有 两 个 目的 。 首 先 ， 要 而 




















保 名 字 和 电子 邮件 都 存在 。 通 过 检查 它们 


























是 否 为 真 ， 可 以 知道 它们 是 否 已 被 定义 ， 而 不 是 空 字符 串 。 其 次 ， 我 们 想 知道 所 提供 的 电子 邮件 地 址 


是 否 有 效 。 这 确实 是 一 个 棘手 的 问题 ， 
果 不 满 足 其 中 任何 一 个 条 件 ， 我 们 就 会 向 errors 对 象 添加 相应 的 键 ， 























因此 我 们 依靠 validator (第 三 方 提供 的 验证 器 ) 来 验证 。 如 











并 将 其 值 设 置 为 错误 消息 。 





之 后 , 需要 更 新 onFormSubmit( ) 方 法 来 使 用 这 个 新 的 validate( ) 方 法 ,并 对 返回 的 error 对 象 
进行 操作 : 


forms/src/07-basic-validation.js 








onFormSubmit = 


所 


evt => { 

const people = [...this.state.peoplel]; 
const person = this.state. fields; 

const fieldErrors = this.validate(person); 
this.setState( {fieldErrors}); 

evt .preventDefault(); 


if (Object.keys(fieldErrors).length) return; 


this.setState({ 
people: people.concat(person), 
fields: { 
Name: 
email: "" 
} 
局: 














要 使 用 validate( ) 方 法 ,我 们 需要 从 this.state.fields 获取 字段 的 当前 值 ， 并 将 其 作为 参数 


提供 。 如 细 















































没有 错误 ，validate( ) 方 法 将 返回 一 个 空 对 象 ; 如 果 有 错误 ， 它 将 返回 一 个 对 象 ， 其 
键 对 应 于 每 个 字段 名 ， 值 对 应 于 每 个 错误 消息 。 















































1 的 


这 两 种 情况 下 ， 我们 都 需要 更 新 state. fieldErrors 





对 象 ， 以 便 render( ) 方 法 可 以 根据 需要 显示 或 隐藏 消息 。 


如 果 验 证 错误 对 象 存在 任何 键 (Object .keys(fieldErrors).1length 、08 )， 那 么 我 们 就 知道 有 
错误 存在 。 如 果 没 有 验证 错误 ,那么 逻辑 与 前 几 节 相同 ， 即 添加 新 信息 并 清空 字段 ( 见 图 6-6 ); 但 如 


果 有 任何 错误 ， 我 们 就 会 提前 返回 〈 见 图 6-7 )。 这 可 以 防止 将 新 信息 添加 到 列表 




















Sign Up Sheet 
Nate 
Email Required 
Submit 
People 
图 6-6 ”电子 邮件 必 填 
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Sign Up Sheet 


Nate 
Bi#d3 Invalid Email 


| Submit 
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图 6-7 ”无效 的 电子 邮件 
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至 此 ， 我 们 已 介绍 了 在 React 中 创建 验证 表单 的 基本 知识 。 下 一 节 将 进一步 介绍 如 何在 字段 级 别 
进行 实时 验证 ， 当 应 用 程序 具有 多 个 不 同 验证 要 求 的 字段 时 ,我 们 将 创建 一 个 Field 组 件 以 提高 可 维 
护 性 。 


6.2.8 创建 Fielq 组 件 


上 一 节 在 表单 中 添加 了 验证 。 但 是 ， 表 单 组 件 不 但 负责 在 整个 表单 上 进行 验证 ， 同 样 也 为 每 个 字 
段 运行 单独 的 验证 规则 。 

如 果 每 个 字段 只 负责 在 它 自己 的 输入 上 标识 验证 错误 ,而 父 表 单 只 负责 在 表单 级 别 标 识 错误 ， 那 
么 这 是 比较 理想 的 。 这 样 做 有 如 下 几 个 好 处 。 

(1) 以 这 种 方式 创建 的 电子 邮件 字段 可 以 在 用 户 输入 时 实时 检查 其 输入 的 格式 。 

(2) 字段 可 以 包含 其 验证 的 错误 消息 ， 从 而 使 得 父 表单 不 必 跟 踪 它 。 

为 此 ,首先 要 创建 一 个 独立 的 新 Field 组 件 , 并 使 用 它 来 代替 表单 中 的 input 元 素 。 它 能 够 将 常 
规 的 input 元 素 与 逻辑 验证 及 错误 消息 结合 起 来 。 

在 开始 创建 这 个 新 组 件 之 前 ， 我 们 从 宏观 上 来 考虑 它 的 输入 和 输出 会 很 有 用 。 换 句 话 说 ,，“ 需 要 
提供 哪些 信息 给 这 个 组 件 ? ”以 及 “期 望 得 到 什么 样 的 结果 ? ” 

这 些 输入 将 成 为 这 个 组 件 的 props ， 输 出 将 被 用 作 传 递 给 事件 处 理 程序 的 参数 。 

因为 Fielgd 组 件 会 包含 一 个 input 子 元 素 , 所 以 我 们 需要 提供 相同 的 基准 信息 以 便 将 其 传递 下 去 。 
如 果 我 们 想 要 Field 组 件 在 它 的 input 子 元 素 上 使 用 特定 的 placeholder 属性 来 渲染 ， 那 么 在 表单 
的 render() 方 法 中 创建 Field 组 件 时 ， 也 必须 将 placeholder 作为 一 个 属性 提供 。 

需要 提供 的 另外 两 个 属性 是 name 和 value。 就 像 之 前 所 做 的 那样 , name 属性 将 允许 我 们 在 组 件 之 
间 共 享 一 个 事件 处 理 程序 ，value 属性 将 允许 父 表单 预 填充 Fielg 组 件 并 让 它 保持 更 新 。 

此 外 ， 这 个 新 的 Field 组 件 将 负责 自己 的 验证 。 因 此 ， 需 要 为 它 提供 其 包含 的 数据 的 特定 规则 。 
如 果 它 是 “电子 邮件 ”的 Fielg 组 件 ， 那 么 我 们 需要 为 它 提供 验证 函数 作为 它 的 validate 属性 。 在 
组 件 内 部 ， 它 将 运行 此 函数 来 确定 它 的 输入 是 否 是 有 效 的 电子 邮件 地 址 。 

最 后 ， 需 要 为 onChange 事件 提供 一 个 事件 处 理 程序 。 我 们 提供 的 onCchange 属性 函数 会 在 每 次 
Field 组 件 的 输入 发 生变 化 时 调用 ， 并 会 使 用 我 们 定义 的 一 个 事件 参数 来 调用 它 。 这 个 事件 参数 应 该 
有 三 个 我 们 感 兴趣 的 属性 : Field 组 件 的 名 称 、 输 入 的 当前 值 ， 以 及 当前 的 验证 错误 信息 ( 如 果 存 在 
的 话 )。 

下 面 快速 看 一 下 ， 若 要 使 新 的 Field 组 件 能 完成 工作 ， 它 需要 以 下 几 个 属性 。 

@ placeholder: 它 会 直接 传递 给 input 子 元 素 。 与 标签 类 似 , 它 告 诉 用 户 Field 组 件 需 要 什么 
e name: 我 们 需要 它 的 原因 与 为 input 元 素 提供 name 属性 的 原因 相同 , 即 在 事件 处 理 程 序 中 使 

用 它 来 确定 存储 输入 数据 和 验证 错误 信息 的 位 置 。 
e@ value: 父 表单 可 以 使 用 它 来 初始 化 Field 组 件 ， 或 者 可 以 使 用 它 的 新 值 来 更 新 Field 组 件 。 
这 类 似 于 在 input 元 素 上 使 用 的 value 属性 。 
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e@ validate: 在 运行 时 返回 验证 错误 (如 果 有 的 话 ) 的 函数 。 

e@ onChange: 当 Field 组 件 发 生变 化 时 要 运行 的 事件 处 理 程 序 。 此 函数 会 接收 一 个 
为 参数 。 

然后 就 可 以 在 新 的 Field 组 件 上 设置 propTypes: 


forms/src/08-field-component-field.js 





























二 
由 


对象 作 














static propTypes = { 
placeholder: PropTypes.string, 
name: PropTypes.string.isRequired, 
value: PropTypes.string, 
validate: PropTypes.func, 
onChange: PropTypes.func.isRequired 


和 





接 下 来 可 以 考虑 Field 组 件 需要 跟踪 的 state 对 象 。Field 组 件 只 需要 两 个 数据 ， 即 当前 value 
和 error 的 属性 值 。 在 前 面 的 几 节 中 ， 表 单 组 件 的 render( ) 方 法 需要 这 些 数 据 ， 因 此 Field 组 件 也 
一 样 。state 的 初始 设置 如 下 所 示 : 


forms/src/08-field-component-field.js 









































state = { 
value: this.props.value, 
error: false 


> 














个 主要 的 区 别 是 Field 组 件 有 一 个 父 级 , 而 这 个 父 级 有 时 会 更 新 Field 组 件 的 value 属性 ,为 
此 ， 需 要 创建 一 个 新 的 生命 周期 方法 (getDerivedStateFromProps() ) 来 接收 新 值 并 更 新 状态 ， 如 
下 所 示 : 


forms/src/08-field-component-field.js 


























getDerivedStateFromProps(nextProps) { 
return {value: nextProps.value} 


} 
Field 组 件 的 render( ) 方 法 应 该 要 非常 简单 。 它 只 包括 一 个 input 元 素 和 相应 的 span 来 保存 错 
误 消 息 : 


forms/src/08-field-component-field.js 














render() { 
return ( 
<div> 
<input 
placeholder={this .props .placeholder} 
value={this.state.value} 
onChange={this .onChange} 
/> 
<span style={{color: 'red'}}>{this.state.error}</span> 
</div> 
); 
} 
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对 于 input 元 素 ，placeholger 属性 的 值 将 从 父 级 传递 进来 昌 可 以 从 this .props. placeholder 
获得 。 如 上 所 述 ，input 元 素 的 值 和 span 中 的 错误 消息 都 将 存储 在 state 中 。 它 的 值 来 自 于 
this.state.value， 错 误 消 息 则 来 自 于 this.state.error。 

最 后 设置 一 个 onCchange 事件 处 理 程序 ， 它 负责 接收 用 户 输入 、 验 证 、 更 新 状态 ， 以 及 调用 父 级 
的 事件 处 理 程序 。 这 个 方法 就 是 this .onChange: 


onChange (evt) { 





const 
const 
const 



































name = this.props.name; 
value = evt.target .value; 
error = this.props.validate ? this.props.validate(value) : false; 


this.setState( {value, error}); 


this.props.onChange( {name, value, error}); 


} 








this.onChange 是 一 个 非常 有 效 的 函数 。 它 在 几 行 代码 中 处 理 了 四 种 不 同 的 职责 。 与 前 几 节 一 样 ， 





event 对 象 通过 它 的 target .value 属性 为 我 们 提供 了 input 元 素 的 当前 文本 内 容 。 一 旦 有 了 这 些 ， 


就 可 以 知道 























它 是 否 通过 了 验证 。 








如 果 已 为 Field 组 件 的 validate 属性 提供 了 验证 函数 , 我 们 就 会 在 此 处 使 用 它 。 如果 没 有 提供 ， 
我 们 就 不 需要 验证 输入 并 将 error 设置 为 false。 一 旦 有 了 value 和 error ， 就 可 以 更 新 state， 从 
而 使 它们 都 出 现在 render( ) 方 法 中 。 然 而 ,使 用 这 些 信息 不 仅仅 只 是 更 新 Fielg 组 件 。 


当 父 组 人 


























使 用 Field 组 件 时 ， 它 会 将 自己 的 事件 处 理 程序 作为 onchange 属性 传人 。 我 们 调用 这 








个 函数 ， 以 便 将 信息 传递 给 父 组 件 。 在 this.onChange() 中 ， 此 函数 是 this.props. onChange()， 
我 们 调用 它 使 用 了 三 种 信息 : Field 组 件 中 的 name 、value 和 error 属性 。 

可 以 认为 onchange 属性 在 事件 处 理 程序 链 中 负责 携带 信息 。 表 单 包 含 了 Field 组件， 而 Field 
组 件 又 包含 了 一 个 input 元 素 。 事件 在 input 元 素 上 发 生 , 信息 首先 会 传递 到 Field 组 件 , 最 后 会 传 
弟 到 表单 。 


此 时 ,Fielg 组 件 已 准备 就 绊 ， 并 可 用 于 替代 应 用 程序 中 的 input 和 error 消息 组 合 。 
6.2.9 ”使 用 新 的 Fie1d 组 件 


现在 我 们 已 准备 好 去 使 用 全 新 的 Fielg 组件, 因此 需要 对 应 用 程序 进行 一 些 修改 。 最 明显 的 变化 
是 Field 组 件 将 取代 render() 方 法 中 的 input 元 素 和 error 消息 的 span 元 素 。 这 很 好 ,因为 Field 





组 从 


个 表单 以 确保 需要 的 所 有 数据 都 存在 。 为 此 ， 还 需要 表单 级 别 的 验证 。 











F 可 以 处 型 
















































































字段 级 别 的 验证 。 但 在 表单 级 别 的 验证 呢 ? 




















如 果 你 还 有 印象 的 话 ， 其 实 我 们 可 以 使 用 两 种 不 同 级 别 的 验证 : 一 种 是 字段 级 别 的 验证 ， 另 一 种 
是 表单 级 别 的 验证 。 新 的 Field 组 件 将 允许 我 们 实时 验证 每 个 字段 的 格式 。 但是， 它们 不 会 去 验证 整 



























































这 里 要 添加 另 一 个 好 用 的 功能 ， 即 在 表单 验证 通过 ( 或 失败 ) 时 实时 启用 (或 禁用 ) 表单 的 提交 
按钮 。 这 是 一 个 很 好 的 反馈 ， 可 以 改进 表单 的 用 户 体验 ， 让 它 感 觉 更 灵敏 。 
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下 面 是 更 新 后 的 render( ) 方 法 : 


forms/src/08-field-component-form.js 














render() { 

return ( 

<div> 
<h1>Sign UP Sheet</h1> 


<form onSubmit={this.onFormSubmit}> 
<Field 
placeholder="Name" 
name="name" 
value={this.state.fields.name} 
onChange={this .onInputChange} 


validate={val => (val ? false : 'Name Required' )} 
<br /> 
<Field 

placeholder="Email" 

name=" email” 

value={this.state.fields.email} 

onChange={this .onInputChange} 

validate={val => (isEmail(val) ? false : 'Invalid Email')} 
br /> 


<input type="submit" disabled={this.validate()} /> 
</ form> 


<div> 
<h3>People</h3> 
<U1》> 
{this .state.people.map(({name，email}，i) => ( 
<1i key={i}> 
{name} ({email}) 
</1i> 
))} 
</ul> 
«</div> 
</div> 
} 





次 


可 以 看 到 Field 组 件 替 代 了 input 元 素 。 所 有 props 都 与 input 元 素 上 的 相同 ， 只 是 这 次 有 了 
一 个 额外 的 属性 : validate。 

在 上 面 Field 组 件 的 onchange() 方 法 中 ,我 们 调用 了 this.props.validate( ) 函数 。 该 函数 就 
是 我 们 提供 给 Field 组 件 的 validate 属性 。 它 的 目的 是 将 用 户 提 供 的 输入 作为 参数 ， 并 给 出 一 个 与 
该 输入 的 有 效 性 相对 应 的 返回 值 . 如 果 输 入 无 效 ,validate 将 返回 一 个 错误 消息 ,否则 , 它 返 回 false。 
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对 于 name 字段 ，validate 属性 只 是 检查 一 个 真 值 。 只 要 框 中 有 字符 ， 验 证 就 会 通过 ， 否 则 将 返 
回 “Name Required” 错 误 消 息 。 

对 于 email 字段 ,我 们 将 使 用 从 validator 模块 导入 的 isEmail( ) 也 数 。 该 函数 如 果 返 回 true， 
我 们 就 知道 这 是 一 个 有 效 的 电子 邮件 , 那么 验证 会 通过 ; 如 果 返 回 false, 则 会 返回 “Invalid Email” 
消息 。 























， 我 们 只 留 了 它们 的 onchange 属性 ， 它 仍然 被 设置 为 this .onInputChange 函数 。 但 是 ， 
Field 组 件 使 用 的 函数 与 input 元 素 不 同 ， 所 以 我 们 必须 更 新 onInputChange( ) 函数 。 
在 继续 之 前 ， 请 注意 对 render( ) 方 法 所 做 的 最 后 一 个 更 改 : 我 们 根据 条 件 来 禁用 提交 按钮 。 为 
此 ， 我 们 将 disabled 属性 的 值 设置 为 this.validate() 的 返回 值 。 这 是 因为 如 果 验 证 错误 ， 则 
this.validate() 会 返回 一 个 真 值 ， 如 果 表 单 无 效 ， 则 按钮 会 被 禁用 ( 见 图 6-8 )。 稍 后 会 展示 
this.validate() 国 数 。 


























Sign Up Sheet 


[heto Hnvalid Email 


Submit 


People 








图 6-8 被 禁用 的 提交 按钮 


如 前 所 述 , 两 个 Field 组 件 都 把 它们 的 onchange 属性 设置 为 this.onInputchange。 我 们 必须 做 
一 些 修改 来 匹配 input 元 素 和 Field 组 件 之 间 的 差异 。 下 面 是 更 新 后 的 版 本 : 


forms/src/08-field-component-form.js 


























onInputChange = ({name, value, error}) => { 
const fields = Object.assign({}, this.state. fields); 
const fieldErrors = Object.assign({}, this.state.fieldErrors); 


fields[name] = value; 
fieldErrors[name|] = error; 


this.setState( {fields, fieldErrors}); 
}; 








以 前 onInputChange( ) 函数 的 工作 是 使 用 当前 用 户 输 入 的 值 来 更 新 this .state. fields。 换 句 话 
说 ， 当 文本 字段 被 编辑 时 ， 我们 就 会 使 用 事件 对 象 调用 onInputChange( ) 函数 。 该 事件 对 象 有 一 个 引 
用 input 元 素 的 target 属性 。 我 们 可 以 使 用 该 引用 获得 input 元 素 的 name 属性 和 value 属性 的 值 ， 
并 使 用 它们 更 新 state. fields。 
现在 的 onInputChange( ) 函数 也 具有 相同 的 职责 ， 只 是 调用 这 个 函数 的 是 Fielg 组 件 ， 而 不 是 
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input 元 素 。, 前 一 节 展 示 了 Field 组 件 的 onChange( ) 方 法 , 它 就 是 调用 this.props.onChange() 的 地 方 。 
当 this.props.onChange( ) 被 调用 时 ， 就 像 这 样 : this.props. onChange({name，value，error])。 

这 意味 着 我 们 不 青 像 以 前 那样 使 用 evt .target .name 或 evt .target.value， 而 是 直接 从 参数 对 
象 中 获取 name 和 value 属性 的 值 。 此 外 ， 我 们 还 获取 到 了 每 个 字段 的 验证 错误 。 这 是 必要 的 ， 因 为 
为 了 防止 表单 组 件 提 交 ， 它 需要 知道 字段 级 别 的 验证 错误 。 

一 旦 有 了 name 、value 和 error 属性 的 值 ， 我 们 就 可 以 更 新 state 中 的 两 个 对 象 ， 即 之 前 使 
用 的 state.fields 对 象 ， 以 及 一 个 新 的 state.fieldErrors 对 象 。 很 快 我 们 将 展示 如 何 使 用 
state.fieldErrors 来 防止 或 允许 表单 提交 ， 有 具体 取决 于 字段 级 别 的 验证 错误 是 否 存 在 。 

随 着 render() 和 onInputChange( ) 子 数 的 更 新 ,我们 再 次 为 Field 组 件 设置 了 一 个 很 好 的 反馈 
循环 。 



























































































































































首先 ， 用 户 会 在 Field 组 件 上 输入 。 

然后 ， 调 用 Field 组 件 的 onInputchange( ) 事 件 处 理 程序 。 

接 下 来 ，onInputChange( ) 会 更 新 state。 

之 后 ， 表 单 再 次 被 泻 染 ， 并 且 向 Field 组件 传递 了 更 新 后 的 value 属性 的 值 。 

接着 使 用 新 的 value 属性 的 值 调用 Field 组 件 中 的 getDerivedStateFromProps() 方 法 并 返 

回 新 状态 。 
e@ 最 后 , 再 次 调用 Field.render() 方 法 , 日 文本 字段 显示 相应 的 输入 和 验证 错误 ( 如 果 有 的 话 )。 
此 时 ,表单 中 的 state 和 外 观 是 同步 的 ， 接 下 来 需要 修改 处 理 提 交 事件 的 方式 。 这 是 更 新 后 的 表 

单 事件 处 理 程序 onFormSubmit( ) : 


forms/src/08-field-component-form.js 









































































































































onNnFormSubmit = evt => { 
const people = this.state.people; 
const person = this.state.fields; 


evt .preventDefault(); 
if (this.validate()) return; 


this.setState({ 
people: people.concat(person), 
fields: { 
name: '! 
email: "" 
} 
}); 
}; 











onFormSubmit( ) 函数 的 目的 没有 变化 。 它 仍然 负责 将 人 员 添 加 到 列表 中 , 或 者 当 存 在 验证 错误 时 
则 阻止 该 行为 发 生 。 为 了 检查 验证 错误 ， 我们 调用 this.validate() 国 数 ， 如 果 有 错误 ， 则 该 函数 会 
在 新 人 员 添 加 到 列表 之 前 返回 。 

下 面 是 validate( ) 也 数 的 最 新 版 本 : 
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validate () { 
const person = this.state.fields; 
const fieldErrors = this.state.fieldErrors; 
const errMessages = Object.keys(fieldErrors).filter((k) => fieldErrors[k]) 


if (!person.name) return true; 
if (!person.email) return true; 
if (errMessages.1length) return true; 


return false 
入 
简单 地 说 , validate() 的 检查 是 为 了 确保 数据 在 表单 级 别 上 是 有 效 的 。 表 单 要 在 这 个 级 别 通过 验 
证 ， 必 须 满足 两 个 要 求 : 两 个 字段 都 不 为 空 ; 不 能 有 任何 字段 级 别 的 验证 错误 。 
为 了 满足 第 一 个 要 求 ， 我 们 需要 访问 this.state.fields 并 确保 state.fields.name 和 
state. fields.email 的 值 都 为 真 。 它 们 会 由 onInputChange( ) 函数 来 保持 数据 更 新 ， 因 此 它 将 始终 
匹配 文本 字段 中 的 内 容 。 如 果 缺 少 name 或 email 属性 的 值 ， 则 会 返回 true ， 表 示 存 在 验证 错误 。 


对 于 第 二 个 要 求 ， 我 们 来 看 this .state.fieldErrors。onInputChange( ) 也 数 会 在 此 对 象 上 设 
置 字段 级 别 的 验证 错误 消息 。 我 们 使 用 Object .keys 和 Array.filter 来 获取 所 有 存在 的 错误 消息 的 
数组 。 如 果 存 在 任何 字段 级 别 的 验证 问题 ， 那 么 数组 中 会 有 相应 的 错误 消息 ， 因 此 它 的 长 度 不 为 零 且 
为 真 值 。 如 果 是 这 种 情况 ， 我 们 也 返回 true 表示 存在 验证 错误 。 

validate() 是 一 个 简单 的 方法 ,可 以 在 任何 时 候 调 用 它 来 检查 数据 在 表单 级 别 是 否 有 效 。 我 们 在 
onFormSubmit( ) 函数 中 使 用 它 来 防止 向 列表 添加 无 效 数据 ， 并 在 render( ) 函数 中 使 用 它 来 禁用 提交 
按钮 ， 从 而 为 UI 提供 了 良好 的 反馈 。 

就 是 这 样 。 下 面 使 用 自 定义 的 Fielg 组 件 来 动态 执行 字段 级 别 的 验证 ,并 使 用 表单 级 别 的 验证 来 
实时 切换 提交 按钮 


6.3 ”远程 数据 
我 们 的 表单 应 用 程序 即将 发 布 。 用 户 可 以 使 用 他 们 的 名 字 和 电子 邮件 进行 注册 ， 并 在 接收 输入 之 


前 验证 这 些 信息 。 但 现在 要 把 它 提 升 一 个 档次 。 我 们 将 探讨 如 何 允许 用 户 从 分 层次 的 异步 选项 中 进行 
选择 






































































































































































































































最 常见 的 例子 是 允许 用 户 按 年 份 、 制 造 商 和 型 号 选择 汽车 。 用 户 首先 选择 年 份 ， 然 后 是 制造 商 ， 
最 后 是 型 号 。 在 一 次 选择 中 选 好 一 个 选项 后 , 下 一 个 选项 就 可 用 了 。 构建 这 样 的 组 件 有 两 方面 很 有 趣 。 
首先 ， 并 非 所 有 组 合 都 有 意义 。 就 像 你 没有 理由 允许 用 户 可 以 选择 1965 年 的 Tesla Model T ( 特 
斯 拉 了 型 车 )。 每 个 选项 列表 ( 除了 第 一 个 选项 之 外 ) 都 依赖 于 先前 选择 的 值 。 

其 次 ,我 们 不 希望 将 数据 库 中 所 有 可 选择 的 数据 都 发 送 到 浏览 咒 。 相 反 ， 浏 览 器 只 知道 最 高 级 别 
的 选项 ( 例如 特定 范围 内 的 年 份 )。 当 用 户 进行 选择 时 ， 我 们 将 所 选 的 值 提供 给 服务 器 并 获取 下 一 级 
( 例如， 通过 年 份 的 获取 可 用 制造 商 )。 因 为 下 一 级 选项 来 自 服务 器 ， 所 以 这 是 一 个 异步 活动 。 
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应 用 程序 不 会 对 用 户 的 汽车 感 兴趣 ， 但 我 们 会 想 知道 他 们 在 注册 什么 。 这 个 应 
odeSchool 的 课程 来 了 解 更 多 的 JavaScript。 

心 基 础 课程 和 选修 课程 。 可 以 将 这 些 视 为 NodeSchool 的 系 。 因 此 ， 根 
据 用 户 感 兴趣 的 系 ， 我 们 可 以 允许 他 们 选择 相应 的 课程 。 这 类 似 于 上 面 的 例子 ， 用 户 需要 先 选择 年 份 





用 户 通过 选择 要 参加 N 
































再 选择 汽车 制造 商 。 
































NodeSchool 的 课程 分 为 核 ， 











A 











程序 的 目的 是 让 

















如 果 用 户 选择 核心 的 系 ， 我们 将 允许 他 们 从 核心 基础 课程 列表 中 进行 选择 ,例如 learnyounode 和 








stream-adventure。 或 者 ， 如 及 





























他 们 选择 选修 的 系 ， 我 们 将 允许 他 们 选择 像 Functional JavaScript 或 者 








Shader School 这 样 的 课程 。 与 汽车 的 例子 类 似 ， 课 程 列表 也 是 异步 提供 的 ， 并 取决 于 用 户 选 择 的 系 。 











实现 这 一 目标 的 最 简单 方法 是 使 





用 两 个 select 元 素 ， 一 个 用 于 选择 系 ， 另 一 个 用 于 选择 课程 。 








但 我 们 会 先 隐藏 第 二 个 选项 ， 直 到 满足 下 面 的 条 件 : 用 户 选 择 了 一 个 系 ; 我 们 从 服务 器 接收 到 了 相应 





的 课程 列表 。 


我 们 将 创建 一 个 自 定义 组 件 来 处 型 
能 。 通 过 使 用 自 定 义 组 伯 

















件 中 。 


6.3.1 构建 自 定义 组 件 




















EE 这些 字段 的 层次 性 和 异步 性 ， 而 不 是 直接 在 表单 中 构建 此 功 
FEF， 表单 几乎 可 以 不 用 改变 。 任 何 特 定 于 “讲习 班 ” 选 择 的 逻辑 都 将 隐藏 在 组 












































该 组 件 的 目的 是 允许 




















j 户 选择 NodeSchool 课程 。 下 面 将 称 它 为 CourseSelect 组 件 。 








但 是 ， 在 开始 开发 新 的 CourseSelect 组 件 之 前 ,我 们 应 该 考虑 它 应 如 何 与 父 表单 进行 通信 。 这 





将 决定 组 件 的 props。 


























最 明显 的 就 是 onchange( ) 属 性 。 此 组 件 的 目的 是 帮助 用 户 选 择 系 和 课程 ， 并 使 该 数据 可 用 于 表 








单 中 。 此 外 ,我们 希望 确保 调 




















该 组 件 创建 任何 的 特殊 处 理 。 
如 果 需 要 ， 我 们 还 希望 表单 能 够 设置 此 组 件 的 状态 。 当 想 要 在 用 户 提交 信息 后 清空 选择 时 ， 这 尤 
其 有 用 。 为 此 ,我们 需要 接收 两 


























如 性 : department 和 course。 








所 有 这 些 就 是 我 们 所 需要 


件 中 的 呈现 : 


forms/src/09-course-select.js 





的 。 这 个 组 件 将 接收 三 个 props。 以 下 是 它们 在 新 的 CourseSelect 组 














用 onChange( ) 的 参数 与 其 他 字段 组 件 得 到 的 参数 相同 。 这 样 就 不 必 为 
































static propTypes = { 
department: PropTypes.string, 
course: PropTypes.string, 


onChange: PropTypes.func.isRequired 





接 下 来 可 以 考虑 CourseSelect 组 付 
和 course。 当 用 户 进行 选择 以 及 

















F 需 要 跟踪 的 state 对 象 。 两 个 最 明显 的 状态 是 department 


单 在 提交 后 清空 这 些 选 项 时 ， 它 们 就 会 发 生变 化 。 


CourseSelect 组 件 还 需要 跟踪 特定 系 的 可 用 课程 。 当 用 户 选 择 一 个 系 时 , 我 们 将 异步 获取 相应 的 
课程 列表 。 一 旦 有 了 这 个 列表 ， 我 们 就 会 把 它 存 储 在 state 的 courses 中 。 
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最 后 ， 在 应 用 程序 处 理 异 步 数据 获取 时 ， 最 好 通知 用 户 它 正在 后 台 加 载 数据 。 我 们 还 会 跟踪 数据 
是 否 正在 “加 载 ”的 状态 ， 它 保存 在 state 的 _l0ading 中 。 


_loading 的 下 划 线 前 级 只 是 一 种 惯例 ， 用 来 强调 它 纯 粹 是 用 于 表示 的 。 表 示 的 状态 
仅 用 于 UU 效果。 在 本 例 中 ， 它 将 用 于 隐藏 或 显示 加 载 指示 器 图 像 。 


下 面 是 初始 state 的 定义 : 


forms/src/09-course-select.js 








state = { 
department: null, 
course: null, 
courses: [], 
_loading: false 








如 上 所 述 ， 此 组 件 的 父 表单 会 更 新 department 属性 和 course 属性 。getDerivedState- 
FromProps( ) 方 法 会 使 用 更 新 的 值 来 相应 地 修改 state: 


forms/src/09-course-select.js 














getDerivedStateFromProps(update) { 
return { 
department: update.department, 
course: update.course 
上 
} 





现在 ,我 们 已 对 数据 有 了 很 好 的 理解 ， 接 下 来 就 可 以 去 了 解 该 组 件 是 如 何 演 染 的。 这 个 组 件 比 之 
前 的 例子 稍微 复杂 一 点 ， 因 此 我 们 会 利用 组 合 来 保持 代码 整洁 。 你 会 注意 到 render( ) 方 法 主要 由 两 
个 函数 组 成 ， 分 别 是 renderDepartmentSelect() 和 TrenderCourseSelect()。 





forms/src/09-course-select.js 





render() { 
return ( 

<div> 
{this.renderDepartmentSelect()} 
«br /3 
{this.renderCourseSelect( )} 

</div> 

关 

} 











除了 这 两 个 函数 之 外 ,render( ) 方 法 就 没有 什么 其 他 的 代码 了 ,但 这 很 好 地 说 明了 组 件 的 两 个 “一 
半 ” 的 功能 : 一 半 “ 系 ”以 及 一 半 “ 课 程 ”的 功能 。 下 面 先 来 看 “ 系 ” 的 那 一 半 功 能 ， 从 
renderDepartmentSelect() 国 数 开 始 : 




















forms/src/09-course-select.js 





{this.renderDepartmentSelect( )} 
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此 方法 返回 一 个 select 元 素 ， 该 元 素 会 显示 以 下 三 个 选项 之 一 。 当 前 显示 的 选项 取决 于 select 
属性 的 值 。 值 与 select 元 素 匹 配 的 选项 会 被 显示 。 

e@ “Which department? ”( 值 : 空 字符 串 ) 

@ “NodeSchool: Core”( 值 : "core" 

@ “NodeSchool: Electives”( 值 : "electives'" ) 























select 元 素 的 值 是 this.state.department || '…。 换 句 话 说， 如 果 this.state.department 
的 值 为 假 ( 默认 情况 下 是 这 样 )， 那 么 该 值 将 是 一 个 空 字 符 串 并 将 匹配 “Which department? ”。 否 则 ， 
如 果 this.state.department 的 值 是 "core" 或 "electives" ， 那 么 它 将 显示 其 他 两 个 选项 之 一 。 
因为 this.onSelectDepartment 国 数 被 设置 为 select 元素 的 onChange 属性 ， 当 用 户 修 改 该 选 
项 时 ，change 事件 会 调用 onSelectDepartment() 函 数 ， 如 下 所 示 : 


forms/src/09-course-select.js 



































onSelectDepartment = evt => { 
const department = evt.target .value; 
const course = null; 
this.setState({department, course}); 
this.props.onChange( {name: 'department', value: department}); 
this.props.onChange( {name: 'course', value: course}); 


if (department) this.fetch(department); 
入 








当选 择 的 系 改 变 时 ， 我 们 和 希望 能 发 生 三 件 事 : 第 一 ， 更 新 state 以 匹配 所 选 的 系 选 项 ; 第 二 , 通 
过 CourseSelect 组 件 的 属性 提供 的 onChange 处 理 程 序 传 播 变 化 ; 第 三 ， 为 系 获 取 可 用 的 课程 。 

在 更 新 state 时 ， 我 们 会 将 其 更 新 为 事件 的 target 属性 ( 即 select 元 素 ) 的 值 。select 元 素 
的 值 是 所 选 的 选项 的 值 ， 即 : '' 、"core" 或 "electives"。 在 使 用 新 值 设置 好 state 之 后 , render() 
和 renderDepartmentSelect( ) 方 法 会 运行 ， 并 会 显示 一 个 新 选项 。 

请 注意 ,我 们 还 重 置 了 课程 。 因 为 每 门 课程 只 适用 于 它 所 对 应 的 系 。 如 果 系 发 生变 化 ， 它 将 不 再 
是 一 个 有 效 的 选项 。 因 此 ， 我 们 将 其 设置 回 初始 值 nul1 。 

更 新 完 state 之 后 ， 需 要 将 变化 传递 到 组 件 的 this .props .onChange 处 理 程序 。 因 为 我 们 会 像 
以 前 一 样 使 用 参数 ， 所 以 这 个 组 件 可 以 像 Field 组 件 一 样 使 用 ， 且 可 以 为 其 提供 相同 的 处 理 函 数 。 唯 
一 的 技巧 是 需要 调用 两 次 ， 对 每 个 输入 都 调用 一 次 。 

最 后 ， 如 果 选 择 了 一 个 系 ， 则 需要 为 它 获取 课程 列表 。 下 面 是 它 调用 的 fetch( ) 方 法 : 


forms/src/09-course-select.js 
































































































































fetch = department => { 
this .setState({_loading: true, courses: []}); 
apiClient(department).then(courses => { 
this.setState({_loading: false, courses: courses}); 
}); 
}; 
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此 方法 的 职责 是 获取 一 个 gepartment 字符 串 ， 并 用 它 来 异步 获取 相应 的 课程 列表 ( courses )， 
然后 使 用 它 来 更 新 state。 然 而 ， 为 了 更 好 的 用 户 体验 ， 还 需要 确保 state 已 被 修改 。 
我 们 通过 在 apiClient 调用 之 前 更 新 state 来 完成 此 操作 。 我 们 需要 等 待 新 的 课程 列表 的 响应 ， 
在 此 期 间 ， 应 该 向 用 户 显 示 一 个 加 载 指示 器 。 要 做 到 这 一 点 ,我 们 需要 使 用 state 来 反映 获取 数据 的 
状态 。 因 此 在 apiclient 调用 之 前 ， 我 们 将 -loading 状态 设置 为 true。 一 旦 操作 完成 ，_loading 
就 设置 回 false 并 更 新 课程 列表 。 

前 面 提 到 过 这 个 组 件 有 两 个 “一 半 ”， 并 已 在 render( ) 方 法 中 说 明 : 


forms/src/09-course-select.js 































































































render() { 
return ( 
<div> 
{this.renderDepartmentSelect()} 
<br /> 
{this.renderCourseSelect( )} 
</div> 
); 
} 








我 们 已 介绍 了 “ 系 ” 的 这 一 半 。 下 面 来 看 “课程 ”的 这 一 半 功 能 ， 先 从 renderCourseSelect() 
方法 开始 : 


forms/src/09-course-select.js 








{this.renderCourseSelect( )} 








首先 你 会 注意 到 renderCourseSelect( ) 子 数 会 根据 特定 的 条 件 返 回 不 同 的 根 元 素 。 

如 果 state._loading 的 值 为 true，renderCourseSelect( ) 子 数 只 会 返回 一 个 img 元 素 : 一 个 
加 载 指示 器 。 或 者 ， 如 果 我 们 没有 在 加 载 ， 且 还 没有 选择 系 (因此 state .department 的 值 为 假 ), 那 
么 它 会 返回 一 个 空 的 span 元 素 ， 这 样 做 有 效 地 隐藏 了 组 件 的 这 一 半 。 

但 是 ， 如 果 我 们 没有 在 加 载 ， 并 且 用 户 选 择 了 一 个 系 ， 则 renderCourseSelect( ) 涵 数 会 返回 一 
个 类 似 于 renderDepartmentSelect() 国 数 的 select 元 素 。 












































renderCourseSelect() 函数 和 renderDepartmentSelect() 子 数 之 间 最 大 的 区 别 在 于 render- 
CourseSelect( ) 函数 需要 动态 填充 select 元 素 的 子 选项 。 

此 select 元 素 的 第 一 个 选项 是 “Which course?”， 它 的 值 是 一 个 空 字符 串 。 如 果 用 户 还 没有 选择 
课程 ， 那 么 这 是 他 们 应 该 看 到 的 ( 就 像 在 男 一 个 select 元 素 中 “Which department?”)。 第 一 个 选项 
后 面 的 选项 则 来 自 state.courses 中 存储 的 课程 列表 。 

为 了 一 次 性 向 select 元 素 提 供 所 有 子 选 项 元 素 ，select 元 素 会 指定 一 个 数组 作为 它 的 子 项 。 数 
组 中 的 第 一 项 是 “Which course?” 选 项 。 然 后 将 扩展 运算 符 和 map( ) 方 法 一 起 使 用 ， 这 样 从 第 二 个 子 
项 开始 ， 数 组 就 包含 了 来 自 state 的 课程 选项 。 

数组 中 的 每 个 子 项 都 是 一 个 option 元 素 。 像 以 前 一 样 , 每 个 元 素 都 有 它 显示 的 文本 ( 比如 “Which 
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course?”) 以 及 一 个 value 属性 ,如果 select 元 素 的 值 与 option 元 素 的 值 匹配 ,那么 会 显示 该 option 
元 素 。 默 认 情 况 下 ，select 元 素 的 值 是 一 个 空 字符 串 ， 因 此 它 会 匹配 “Which course?” 选 项 。 一旦 用 
户 选择 了 课程 ， 我 们 就 可 以 更 新 state.course， 相 应 的 课程 则 会 显示 出 来 。 


0 我 们 还 必须 为 每 个 option 元 素 提 供 key 属性 ， 以 避免 出 现 来 
自 React 的 警告 。 


最 后 需要 为 select 元 素 的 onChange 属性 提供 一 个 更 改 处 理 函 数 onSelectCourse( ) 。 2 
笠 课 程 时 ， 相 关 的 事件 对 象 将 调用 该 函数 。 然 后 ， 我 们 将 使 用 该 事件 的 信息 来 更 新 状态 并 通知 父 
onSelectCourse( ) 国 数 如 下 所 示 


forms/src/09-course-select.js 












































Tw 

















onSelectCourse = evt => { 
const course = evt.target.value; 
this.setState( {course}); 
this.props.onChange( {name: 'course', value: course}); 


时 





像 之 前 一 样 , 我 们 从 事件 中 获取 了 target 元 素 的 值 。 该 值 是 用 户 在 课程 的 select 元 素 中 选择 的 
option 元 素 的 值 。 一 旦 我 们 使 用 此 值 更 新 了 state .course，select 元 素 就 会 显示 相应 的 option 
元 素 。 

更 新 完 state 之 后 ,我们 调用 组 件 的 父 级 提供 的 更 改 处 理 程序 。 和 系 的 选择 一 样 ， 我 们 为 
this .props.onChange( ) 函数 提供 了 一 个 对 象 参数 ， 该 参数 具有 处 理 程序 期 望 的 name/value 结构 。 

这 就 是 CourseSelect 组 件 ! 下 一 节 将 介绍 它 与 表单 的 集成 ， 但 只 需 非 常 小 的 改动 。 




















6.3.2 ”添加 CourseSelect 组 件 

现在 新 的 CourseSelect 组 件 已 准备 就 绪 ， 我 们 可 以 将 它 添 加 到 表单 中 ， 只 需 做 三 个 小 改动 。 

(1) 将 CourseSelect 组 件 添加 到 rengder( ) 方 法 中 。 

(2) 在 render() 方 法 中 更 新 “人 员 ” 列 表 用 来 显示 新 字段 ( 系 和 课程 )。 

(3) 因为 系 和 课程 是 必 填 字段 ， 所 以 我 们 需要 修改 validate( ) 方 法 以 确保 它们 是 存在 的 。 
因为 我 们 非常 小 心地 以 onInputChange( ) 函数 所 期 望 的 方式 在 CourseSelect 组 件 ( this .props. 
onChange ) 中 使 用 了 {name，value} 对 象 来 调用 更 改 处 理 程序 ， 所 以 该 处 理 程序 能 够 被 重用 。 当 
CourseSelect 组 件 调 用 onInputCchange() 函数 时 ， 它 可 以 使 用 新 的 系 和 课程 信息 去 相应 地 更 新 
state ， 就 像 对 来 自 Field 组 件 的 调用 所 做 的 那样 

下 面 是 更 新 后 的 render( ) 方 法 : 


forms/src/09-async-fetch.js 
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render() { 
return ( 
《<div> 
<h1>Sign Up Sheet</h1i> 
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<form onSubmit={this.onFormSubmit}> 
<Field 
placeholder="Name" 
name="name" 
value={this.state.fields.name} 
onChange={this .onInputChange} 
validate={val => (val ? false : 'Name Required')} 


pe 
chr 7 


<Field 
placeholder="Email" 
name=" email” 
value={this.state.fields.email} 
onChange={this .onInputChange} 
validate={val => (isEmail(val) ? false : 'Invalid Email')} 


pe 
<br /> 


<CourseSelect 
department={this.state. fields.department} 
course={this.state. fields.course} 
onChange={this .onInputChange} 

/> 


区 


<input type="submit" disabled={this.validate()} /> 
</ form> 


<div> 
<h3>People</h3> 
<U1》> 
{this.state.people.map(({name, email, department, course}, i) => ( 
<1i key={i}>{[name, email, department, coursel] .join(' - ')}</1i> 
) 半 
</ul> 
</div> 
</div> 
,3 
} 








在 添加 CourseSelect 组 件 时 ,我们 提供 了 三 个 属性 


(1) 当前 在 state 中 保存 的 系 ( 如果 存在 的 话 ); 
(2) 当前 在 state 中 保存 的 课程 ( 如 果 存 在 的 话 ); 
(3) onInputChange( ) 处 理 程序 (与 Field 组 件 使 用 的 函数 相同 )。 


如 下 所 示 : 





T 
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<CourseSelect 
department={this.state. fields.department} 
course={this.state.fields.course} 
onChange={this.onInputChange} /> 


我 们 在 render( ) 方 法 中 做 的 另 一 个 更 改 是 将 新 的 系 和 课程 字段 添加 到 “人 员 ” 列 表 中 。 一旦 用 
户 提交 注册 信息 ， 它 们 就 会 出 现在 这 个 列表 中 。 为 了 显示 系 和 课程 信息 ， 我 们 需要 从 state 获取 数据 
并 显示 


















































<h3>People</h3> 
<U1》> 
{ this.state.people.map( ({name, email, department, course}, i) => 
<1i key={i}>{[name, email, department, coursel] .join(' - ')}</1i> 
): 2 
</ul> 





这 就 像 从 state .people 数组 的 每 个 子 项 中 提取 属性 一 样 简单 。 

剩 下 唯一 要 做 的 就 是 将 这 些 字段 添加 到 表单 级 别 的 验证 中 。CourseSelect 组 件 可 以 控制 UI 以 看 
保 我 们 不 会 得 到 无 效 的 数据 ， 因 此 无 须 担心 字段 级 别 的 错误 。 然 而 系 和 课程 是 必 填 字段 ， 在 允许 用 户 
提交 之 前 ， 我 们 应 该 确保 它们 是 存在 的 。 我 们 通过 更 新 validate( ) 方 法 来 包含 这 些 验证 : 


forms/src/09-async-fetch.js 














































































































validate = () => { 
const person = this.state.fields; 
const fieldErrors = this.state.fieldErrors; 
const errMessages = Object.keys(fieldErrors).filter(k => fieldErrors[k]); 
if (!person.name) return true; 
if (!person.email) return true; 
if (!person.course) return true; 
if (!person.department) return true; 
if (errMessages.1length) return true; 


return false; 


}3 





一 旦 validate() 方 法 更 新 了 以 后 , 应 用 程序 就 会 一 直 禁 用 提交 按钮 直到 我 们 选择 了 系 和 课程 ( 除 
了 其 他 验证 要 求 之 外 )。 


1 于 React 和 组 合 的 强大 功能 ， 使 得 表单 在 能 够 承担 复杂 功能 的 同时 ， 也 能 保持 高 可 维护 性 。 
6.3.3 分离 视图 和 状态 


我 们 一 旦 从 用 户 那 里 接收 到 信息 并 确定 它 是 有 效 的 ， 接 着 就 需要 将 信息 转换 为 JavaScript 对 象 。 
根据 表单 的 不 同 ， 这 可 能 会 涉及 将 输入 值 从 字符 串 转 换 为 数字 、 日 期 或 布尔 值 。 如 果 需 要 通过 将 值 转 
换 为 数组 或 租 套 对 象 来 强加 一 个 层次 结构 ， 则 可 能 会 涉及 更 多 内 容 。 

在 将 信息 作为 JavaScript 对 象 之 后 ， 我 们 必须 决定 如 何 使 用 它们 。 这 些 对 象 可 以 作为 JSON 发 送 
到 服务 器 并 存储 在 数据 库 中 ， 也 可 以 编码 在 url 中 作为 搜索 查询 条 件 来 使 用 ， 或 者 可 以 只 用 作 配 置 UI 
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的 外 观 。 
这 些 对 象 中 的 信息 几乎 总 是 会 影响 UI, 在 很 多 情况 下 还 会 影响 应 用 程序 的 行为 。 而 如 何在 应 
序 中 存储 这 些 信息 则 由 我 们 来 决定 。 


6.4 异步 持久 性 


此 时 ,我 们 的 应 用 程序 已 经 非常 有 用 了 。 可 以 想象 这 个 应 用 程序 在 自助 服务 终端 上 打开 ， 且 人 们 
可 以 到 这 里 进行 注册 。 然 而 ， 这 里 还 有 一 个 很 大 的 缺陷 : 如 果 浏 览 带 关闭 或 重新 加 载 ， 那 么 所 有 的 数 
据 都 会 丢失 。 

在 大 多 数 Web 应 用 程序 中 , 当 用 户 输入 数据 时 , 数据 会 被 发 送 到 服务 器 以 便 能 安全 保存 在 数据 库 
中 。 然 后 当 用 户 返 回 到 应 用 程序 时 ,数据 可 以 从 服务 器 中 获取 ， 因 此 应 用 程序 可 以 从 用 户 中 断 的 地 方 
重新 开始 。 

在 本 例 中 ， 我 们 将 讨论 持久 性 的 三 个 方面 : 保存 、 加 载 和 错误 处 理 。 我 们 虽然 不 会 将 数据 发 送 到 
远程 服务 器 或 将 其 存储 在 数据 库 中 ( 相反 ,我 们 会 使 用 localStorage )， 但 会 将 其 作为 异步 操作 来 说 
明 大 部 分 持久 性 策略 可 以 被 使 用 。 

为 了 持久 化 注册 列表 ( state.people )， 只 需 对 父 表单 组 件 做 一 些 修改 即 可 。 概 括 来 说 ， 这 些 变 
化 如 下 所 示 。 


(1) 修改 state 来 跟踪 持久 性 状态 。 基 本 上 我 们 只 想 知 道 应 用 程序 是 否 正 在 加 载 、 是 否 正在 保存 ， 
或 者 是 否 在 这 两 个 操作 中 遇 到 错误 。 

(2) 使 用 API 客户 端 去 发 请 求 来 获取 以 前 保存 的 数据 并 将 其 加 载 到 state 中 。 

(3) 更 新 onFormSubmit() 事 件 处 理 程序 以 触发 保存 事件 。 

(4) 更 改 render() 方 法 ， 使 得 “Submit” 按 钮 既 能 反映 当前 的 保存 状态 ， 又 可 以 防止 用 户 执行 不 
必要 的 操作 ( 比如 重复 保存 )。 

首先 要 修改 state 来 跟踪 “加 载 ” 状 态 和 “保存 ”状态 。 这 对 于 准确 地 传递 持久 性 的 状态 和 防止 
不 必要 的 用 户 操作 都 很 有 有 用。 例如， 如 果 我 们 知道 应 用 程序 正在 “保存 ”中 ， 则 可 以 禁用 提交 按钮 。 
下 面 是 更 新 后 的 state( ) 方 法 ， 它 带 有 两 个 新 属性 : 


forms/src/10-remote-persist.js 
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state = { 
fields: { 
Name: "! 
email: "! 
course: null, 
department: null 
}, 
fieldErrors: {}, 
people: [], 
_loading: false, 
_SaveStatus: 'READY' 
入 
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这 两 个 新 属性 是 _1oading 和 _saveStatus。 和 以 前 一 样 , 我 们 约定 使 用 下 划 线 前 级 来 表示 它们 对 
于 该 组 件 是 私有 的 。 这 是 因为 父 组 件 或 子 组 件 无 须知 道 它们 的 值 。 

_saveStatus 属性 的 初始 值 为 "READY" ， 但 它 会 有 四 个 可 能 的 值 : "READY""SAVING""SUCCESS" 和 
"ERROR" 。 如 果 _saveStatus 属性 的 值 是 "SAVING" 或 者 "SUCCESS" ,那么 我 们 会 阻止 用 户 进行 额外 的 
保存 。 

接 下 来 ， 当 组 件 已 成 功 加 载 并 即将 添加 到 DOM 时 ， 我们 需要 请 求 之 前 保存 的 数据 。 为 此 ， 我 们 
会 添加 componentDidMount() 生 命 周期 方法 ，React 会 在 适当 的 时 候 自动 调用 它 ， 如 下 所 示 : 


forms/src/10-remote-persist.js 






































componentDidMount() { 
this .setState({_loading: true}); 
apiClient.1loadPeople().then(people => { 
this.setState({_loading: false, people: people}); 
所 7 
} 








在 开始 使 用 apiclient 获取 数据 之 前 , 我 们 将 state._1loading 设置 为 true。 这 是 因为 我 们 将 在 
render( ) 方 法 中 使 用 它 来 显示 加 载 指示 器 。 一 旦 数据 获取 好 , 我 们 就 可 以 使 用 之 前 持久 化 的 列表 来 更 


新 state.people 并 将 _l1oading 设置 为 false。 





























2 apiClient 是 我 们 创建 的 一 个 简单 对 象 ， 用 于 模拟 数据 异步 加 载 和 保存 。 如 果 你 查 
看 本 章 的 代码 ， 就 会 看 到 “保存 ”和 “加 载 ” 方 法 是 使 用 了 异步 操作 简单 包装 了 
localStorage。 在 你 自己 的 应 用 程序 中 ,可 以 使 用 类 似 的 方法 创建 apiClient 以 执 
行 网 络 请 求 。 
不 幸 的 是 ， 目 前 应 用 程序 还 没有 办 法 持久 化 数据 。 因 此 ， 此 时 它 不 会 加 载 任何 数据 。 不 过 ， 可 以 
通过 更 新 onFormSubmit( ) 函数 来 解决 这 个 问题 。 
和 前 面 几 节 一 样 ， 我 们 和 希望 用 户 能 够 填写 每 个 字段 并 点 击 “Submit” 按 钮 将 人 员 添 加 到 列表 中 。 
当 他 们 这 样 做 时 , onFormSubmit( ) 函数 会 被 调用 。 我 们 会 做 一 个 修改 , 它 不 仅 可 以 执行 前 面 的 行为 ( 验 
证 和 更 新 state.people )， 还 可 以 使 用 apiclient .savePeople( ) 持 久 化 该 列表 : 


forms/src/10-remote-persist.js 












































onFormSubmit = evt => { 
const person = this.state. fields; 


evt .preventDefault(); 

if (this.validate()) return; 

const people = [...this.state.people, person]; 
this .setState({_saveStatus: 'SAVING'}); 
apiClient 


.SavePeople(people) 
.then(() => { 
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this .setState({ 
People: people, 
fields: { 
name: '"! 
email: ' 
course: null, 
department: null 
}, 
_SaveStatus: 'SUCCESS' 
}); 
}) 
.catch(err => { 
console.error(err); 
this .setState({_saveStatus: 'ERROR'}); 
}); 
把 





在 前 面 的 部 分 中 ， 如 果 数 据 通过 验证 ， 我 们 只 会 更 新 state.people 列表 来 包含 它 。 这 次 我 们 还 
会 把 person 添加 到 people 列表 中 , 但 只 希望 在 apiClient 能 够 成 功 持久 化 数据 时 才 更 新 state。 操 
作 顺 序 如 下 所 示 。 

(1) 创建 一 个 新 数组 people ， 它 包含 state.people 列表 和 新 的 person 对 象 。 

(2) 将 state._saveStatus 更 新 为 "SAVING"。 

(3) 开始 使 用 apiclient 持久 化 新 的 people 数组 (来自 第 一 步 )。 

(4) 如 果 apiClient 返回 成 功 ， 则 使 用 新 的 people 数组 、 空 fields 对 象 和 _saveStatus: "SUCCESS" 
来 更 新 state。 如 果 apiClient 返回 失败 ， 则 保持 原样 ,但 需要 把 state._saveStatus 设置 为 "ERROR"。 

简 而 言 之 ， 当 apiClient 正在 请 求 中 时 , 我 们 需要 将 _saveStatus 设置 为 "SAVING"。 如 果 请 求 成 
功 ， 则 需要 将 _saveStatus 设置 为 "SUCCESS" ， 并 执行 和 之 前 相同 的 操作 。 如 果 请 求 失败 ， 则 唯一 需 
要 更 新 的 是 将 _saveStatus 设置 为 "ERROR"。 这 样本 地 状态 就 不 会 与 持久 化 的 副本 不 同步 。 此 外 ， 
为 我 们 没有 清空 字段 ， 所 以 给 了 用 户 再 次 尝试 的 机 会 ， 并 且 不 需要 重新 输入 他 们 的 信息 。 


这 个 例子 中 ， 我 们 在 UI 更 新 方面 比较 保守 。 只 有 当 apiClient 返回 成 功 时 ， 我 们 

用 才 会 将 新 成 员 添 加 到 列表 中 。 这 与 乐观 更 新 形成 了 鲜明 的 对 比 ， 在 乐观 更 新 中 ， 我 

们 首先 会 将 person 添加 到 本 地 列表 中 ， 然 后 在 出 现 故 障 时 再 进行 调整 。 为 了 进行 
乐观 更 新 ， 可 以 跟踪 在 apiClient 调用 之 前 添加 的 那些 person 对 象 。 然 后 ， 如 果 
apiClient 调用 失败 , 则 可 以 选择 性 地 删除 与 该 调用 关联 的 特定 person 对 象 。 还 需 
要 向 用 户 显 示 一 条 解释 该 问题 的 消息 。 

最 后 一 个 变化 是 修改 render( ) 方 法 ,以便 UI 能 准确 地 反映 关于 加 载 和 保存 的 状态 。 如 前 所 述 ， 
需要 让 用 户 知 道 应 用 程序 是 在 加 载 中 还 是 保存 中 ， 或 者 在 保存 过 程 中 是 否 存在 问题 。 还 可 以 控制 UI 
以 防止 它们 执行 不 必要 的 操作 ， 比 如 重复 保存 。 

下 面 是 更 新 后 的 render( ) 方 法 : 
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forms/src/10-remote-persist.js 





render() { 
if (this.state._loading) { 
return “img alt="loading" src="/img/loading.gif" />; 


} 


return ( 
<div> 
<h1i>Sign Up Sheet</h1> 


<form onSubmit={this.onFormSubmit}> 
<Field 
placeholder="Name" 
name="name" 
value={this.state.fields.name} 
onChange={this .onInputChange} 
validate={val => (val ? false : 'Name Required' )} 


/> 
<br /> 


<Field 
placeholder="Email" 
name="email" 
value={this.state. fields.email} 
onChange={this .onInputChange} 
validate={val => (isEmail(val) ? false : 'Invalid Email')} 


/> 
<br /> 


<CourseSelect 
department={this.state. fields.department} 
course={this.state. fields.course} 
onChange={this .onInputChange} 


/> 
br /> 
{ 
{ 
SAVING: “input value="Saving..." type="submit" disabled />， 
SUCCESS: “input value="Saved!" type="submit" disabled />， 
ERROR: ( 
<input 
value="Save Failed - Retry?" 
type="submit" 
disabled={this .validate( )} 
> 
ss 
READY: ( 
<input 


value="Submit" 


6.4 异步 持久 性 175 





type="submit" 
disabled={this.validate( )} 
/> 
) 
} [this .state._saveStatus|] 
} 


</ form> 


<div> 
<h3>People</h3> 
<Ul> 
{this.state.people.map(({name, email, department, course}, i) => ( 
<li key={i}>{[name, email, department, coursel] .join(' - ')}</1i> 
))} 
</ul> 
</div> 
</div> 
放 
} 











首先 ， 我 们 会 在 加 载 以 前 保存 的 数据 时 向 用 户 显 示 一 个 加 载 指示 器 。 和 前 一 节 一 样 ， 这 是 在 
render() 方 法 的 第 一 行 完 成 的 ， 它 会 根据 条 件 判断 并 会 提早 返回 。 当 应 用 程序 正在 加 载 时 
(state._loading 的 值 为 真 )， 我 们 不 会 泻 染 表单 ， 只 泻 染 加 载 指示 器 : 


if (this.state._loading) return “img src='/img/loading.gif' /> 


接 下 来 ,我 们 和 希望 提交 按钮 能 够 传达 当前 的 保存 状态 。 如 果 没 有 保存 请 求 正 在 进行 中 , 那么 我 们 
希望 在 字段 数据 有 效 的 情况 下 启用 该 按钮 。 如 果 正 在 保存 ， 那 么 我 们 和 希望 按钮 显示 为 “Saving.…” 且 
被 禁用 。 用 户 会 知道 应 用 程序 正 忙 ， 且 因为 按钮 被 禁用 ， 所 以 他 们 无 法 提交 重复 的 保存 请 求 。 如 果 保 
存 请 求 导 致 错误 ,我 们 会 使 用 按钮 文本 进行 传达 ， 并 指示 用 户 可 以 重 试 。 如 果 输 入 数据 仍 有 效 ， 那么 
该 按钮 会 被 启用 。 最 后 ， 如 果 保 存 请 求 成 功 完成 ,我 们 会 使 用 按钮 文本 进行 传达 。 下 面 是 泻 染 按钮 的 
方式 : 

{{ 

SAVING: “input value='Saving...' type='submit' disabled /， 
SUCCESS: “input value='Saved!' type='submit' disabled/», 


ERROR: «input value='Save Failed - Retry?' type='submit' disabled={this.validate()\ 


3 
READY: <input value='Submit' type='submit' disabled={this.validate()}/> 
}[this.state._saveStatus]} 


这 里 有 四 个 不 同 的 按钮 ， 对 应 于 每 个 可 能 存在 的 state._saveStatus。 每 个 按钮 都 是 一 个 对 象 的 
值 ， 该 对 象 以 其 对 应 的 状态 为 键 。 通 过 访问 当前 保存 状态 的 键 ， 该 表达 式 会 计算 并 得 到 对 应 的 按钮 。 

我 们 还 要 做 最 后 一 件 事 ， 它 与 "SucCESS "案例 有 关 。 我 们 希望 向 用 户 显示 已 添加 成 功 ， 为 此 修改 了 
按钮 的 文本 ， 但 “Saved!” 并 不 能 很 好 地 表达 用 户 的 操作 行为 。 如 果 用 户 输入 了 另 一 个 人 的 信息 并 想 
将 其 添加 到 列表 中 ， 按 钮 仍 会 显示 “Saved!”。 它 应 该 是 “Submit” 才 能 更 准确 地 反映 操作 的 目的 。 
修复 这 个 问题 很 简单 ， 即 一 旦 用 户 再 次 开始 输入 信息 就 将 state._saveStatus 更 改 回 "READY"。 
为 此 ， 我 们 更 新 onInputChange( ) 处 理 程序 : 
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forms/src/10-remote-persist.js 





onInputChange = ({name, value, error}) => { 
const fields = this.state.fields; 
const fieldErrors = this.state.fieldErrors; 


fields[name] = value; 
fieldErrors[name] = error; 


this.setState({fields, fieldErrors, _saveStatus: 'READY'}); 
}; 




















现在 onInputChange() 子 数 不 只 是 更 新 state.fields 和 state.fieldErrors ， 它 还 将 
state._saveStatus 设置 为 'READY' 。 这 样 做 以 后 ， 当 用 户 确认 了 他 们 之 前 的 提交 成 功 并 再 次 开始 与 
应 用 程序 交互 时 ， 按 钮 就 会 恢复 到 “就 缮 ”状态 并 引导 用 户 再 次 提交 。 


此 时 ， 注 册 应 用 程序 已 很 好 地 说 明了 我 们 在 表单 中 使 用 React 所 涵盖 的 特性 和 问题 。 











6.5 Redux 


本 节 将 展示 如 何 修改 之 前 构建 的 表单 应 用 程序 ， 以 便 它 可 以 在 使 用 Redux 的 更 大 的 应 用 程序 中 
工作 。 


2, 按照 时 间 顺 序 ， 本 书 还 没有 讨论 过 Redux。 接 下 来 的 两 章 都 是 关于 Redux 的 深入 介 
绍 。 如 果 你 不 熟悉 Redux， 先 跳 过 现在 这 些 章节 去 看 一 下 ， 当 你 需要 处 理 Redux 中 
的 表单 时 再 回 到 这 里 。 


整个 应 用 程序 曾 是 一 个 表单 ， 但 现在 会 变 成 一 个 组 件 。 此 外 ， 我 们 将 对 其 进行 调整 以 适合 Redux 
范式 。 概 括 来 说 ， 这 涉及 将 状态 和 功能 从 表单 组 件 到 Redux 的 reducer 和 action 的 迁移 。 例如， 我 们 
将 不 再 从 表单 组 件 中 调用 API 函数 , 而 是 使 用 Redux 进行 异步 操作 。 类似 地 , 过 去 在 表单 中 使 用 state 
保存 的 数据 将 成 为 只 读 的 props， 并 且 它 现在 将 保存 在 Redux store 中 

当 使 用 Redux 构建 时 ， 首 先 考虑 状态 会 采用 的 “形状 ”是 非常 有 用 的 。 就 我 们 的 例子 来 说 ， 我 们 
其 实 已 有 了 一 个 很 好 的 主意 ， 因 为 功能 已 构建 好 了 。 当 使 用 Redux 时 ,我们 会 希望 尽 可 能 地 集中 状态 
( 它 就 是 store )， 且 应 用 程序 中 的 所 有 组 件 都 可 以 访问 。 下 面 是 initialState (初始 状态 ): 


forms/src/ll-redux-reducer.js 
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const initialState = { 

people: [], 
isLoading: false, 
saveStatus: 'READY', 
person: { 

name: "! 

email: 

course: null, 

department: null 
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这 里 没有 什么 特别 的 地 方 。 应 用 程序 关心 的 是 注册 用 户 的 列表 、 当 前 在 表单 中 输入 的 用 户 、 程 序 
是 否 正在 加 载 以 及 保存 我 们 尝试 的 状态 。 

既然 我 们 已 知道 了 state 的 模型 ， 就 可 以 想 出 改变 它 的 不 同 动 作 。 例 如 ， 因 为 我 们 一 直 在 跟踪 人 
员 列 表 数 据 ， 所 以 可 以 抽象 出 一 个 在 应 用 程序 启动 时 从 服务 器 检索 列表 的 动作 。 该 动作 会 影响 状态 的 
多 个 属性 。 当 服务 器 返回 请 求 的 列表 时 ， 我 们 会 用 它 来 更 新 状态 ， 也 会 更 新 isLoading。 实 际 上 当 请 
求 开始 时 ， 我 们 会 将 isLoading 设置 为 true; 当 请 求 结束 时 ， 则 将 它 设置 为 false。 使 用 Redux 重 
要 的 是 要 认识 到 经 常 可 以 将 一 个 目标 行为 分 解 为 多 个 动作 。 

对 于 Redux 应 用 程序 ， 它 将 有 五 种 动作 类 型 。 前 两 个 与 刚 提 到 的 目标 行为 有 关 ， 它 们 是 
FETCH_PEOPLE_REQUEST 和 FETCH_PEOPLE_SUCCESS。 以 下 是 这 些 动作 类 型 及 其 相应 的 动作 创建 器 : 


forms/src/ll-redux-actions.js 







































































/* eslint-disable no-use-before-define */ 
export const FETCH_PEOPLE_REQUEST = 'FETCH_PEOPLE_REQUEST'; 
function fetchPeopleRequest () { 
return {type: FETCH_PEOPLE_REQUEST}; 
} 


export const FETCH_PEOPLE_SUCCESS = 'FETCH_PEOPLE_SUCCESS'; 
function fetchPeopleSuccess (people) { 

return {type: FETCH_PEOPLE_SUCCESS, people}; 
} 








当 请 求 开 始 时 ， 除 了 reducer 对 应 的 动作 类 型 无须 提供 其 他 任何 信息 。reducer 会 知道 请 求 仅 从 
类 型 开始 ， 并 可 以 把 isLoading 更 新 为 true。 当 请 求 成 功 后 ，reducer 会 将 其 设置 为 false， 但 我 们 
要 提供 该 更 新 所 需要 的 人 员 列 表 。 这 就 是 第 二 个 FETCH_PEOPLE_SUCCESS 动作 需要 people 参数 的 原 
因 。 


















































为 了 方便 起 见 ， 我 们 跳 过 了 FETCH_PEOPLE_FAILURE 动作 ,但 你 需要 在 自己 的 应 用 
程序 中 处 理 获 取 失 败 的 场景 。 有 关 如 何 保存 列表 的 信息 ， 请 参见 下 文 。 
现在 可 以 分 派 这 些 动 作 并 适当 地 更 新 状态 。 要 从 服务 器 获取 人 员 列 表 ， 我 们 需要 分 派 FETCH_ 
PEOPLE_REQUEST 动作 ， 然 后 使 用 API 客户 端 获 取 列 表 ， 最 后 分 派 FETCH_PEOPLE_SUCCESS 动作 (其 
中 包含 人 员 列 表 )。 借 助 Redux， 我 们 可 以 使 用 异步 动作 创建 器 fetchPeople() 来 执行 以 下 动作 : 


forms/src/ll-redux-actions.js 














export function fetchPeople () { 
return function (dispatch) { 
dispatch( fetchPeopleRequest()) 
apiClient.1loadPeople().then((people) => { 
dispatch( fetchPeopleSuccess(people)) 
}) 
} 
} 








异步 动作 创建 器 返回 的 是 分 派 动 作 的 函数 ， 而 不 是 返回 一 个 动作 对 象 。 








默认 情况 下 ，Redux 不 支持 创建 异步 动作 。 为 了 能 够 分 派 函 数 而 不 是 动作 对 象 ， 需 
要 在 创建 store 时 使 用 redux-thunk 中 间 件 。 


还 需要 创建 把 列表 保存 到 服务 器 的 动作 ， 如 下 所 示 : 


forms/src/11-redux-actions.js 








export const SAVE_PEOPLE_REQUEST = 'SAVE_PEOPLE_REQUEST ' 
function savePeopleRequest () { 

return {type: SAVE_PEOPLE_REQUEST}; 
} 


export const SAVE_PEOPLE_FAILURE = 'SAVE_PEOPLE_FAILURE'; 
function savePeopleFailure (error) { 

return {type: SAVE_PEOPLE_FAILURE, error}; 
} 








export const SAVE_PEOPLE_SUCCESS = 'SAVE_PEOPLE_SUCCESS'; 
function savePeopleSuccess (people) { 
return {type: SAVE_PEOPLE_SUCCESS, people}; 





就 像 获取 数据 时 那样 ， 我 们 有 SAVE_PEOPLE_REQUEST 和 SAVE_PEOPLE_SUCCESS 动作 ， 但 也 增加 
了 SAVE_PEOPLE_FAILURE 动作 。SAVE_PEOPLE_REQUEST 动作 在 请 求 开 始 时 发 生 ， 与 之 前 一 样 ， 无 须 提 
供 除 动作 类 型 之 外 的 其 他 任何 数据 。reducer 会 看 到 这 个 类 型 ， 并 知道 把 saveStatus 更 新 成 'SAVING' 。 
请 求 完 成 后 ， 我 们 可 以 根据 结果 触发 SAVE_PEOPLE_SUCCESS 或 SAVE_PEOPLE_FAILURE 动作 。 我 们 希 
望 通过 它们 传递 一 些 额外 的 数据 ， 即 成 功 保存 时 的 people 和 失败 时 的 error。 

下 面 在 异步 动作 创建 器 savePeople( ) 中 一 起 使 用 它们 : 


forms/src/11-redux-actions.js 


























export function savePeople (people) { 
return function (dispatch) { 
dispatch(savePeopleRequest( ) ) 
apiClient.savePeople(people) 
.then((resp) => { dispatch(savePeopleSuccess(people)) }) 
.catch((err) => { dispatch(savePeopleFailure(err)) }) 
} 
} 





请 注意 ， 该 动作 创建 器 把 发 出 API 请求 的 “工作 ”委托 给 了 API 客户 端 。 因 此 可 以 这 样 定义 API 
客户 端 : 


forms/src/11-redux-actions.js 











const apiClient = { 
loadPeople: function () { 
return { 
then: function (cb) { 
setTimeout( () => { 
cb(JSON.parse(localStorage.people || '[]')) 
}, +1660); 
} 
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} 
}, 


savePeople: function (people) { 
const success = !!(this.count++ % 2); 


return new Promise(function (resolve, reject) { 
setTimeout( () => { 
if (!success) return reject({success}); 


localStorage.people = JSON.stringify(people); 
resolve({success}); 
}, 10600); 


}) 




















现在 已 定义 了 所 有 的 动作 创建 器 ， 并 已 拥有 了 reducer 所 需 的 所 有 东西 。 通 过 使 用 上 面 的 两 个 异 
步 动 作 创 建 舌 ，reducer 可 以 对 应 用 程序 需要 的 状态 进行 所 有 的 更 新 操作 。reducer 如 下 所 示 : 


forms/src/ll-redux-reducer.js 














const initialState = { 
people: []， 
isLoading: false, 
SaveStatus: 'READY', 
person: { 


name : 
email: '', 
course: null, 
department: null 


}, 
}; 


export function reducer (state = initialState, action) { 
switch (action.type) { 
case FETCH_PEOPLE_REQUEST : 
return Object.assign({}, state, { 
isLoading: true 
}); 
case FETCH_PEOPLE_SUCCESS: 
return Object.assign({}, state, { 
people: action.people, 
isLoading: false 
3 
case SAVE_PEOPLE_REQUEST : 
return Object.assign({}, state, { 
saveStatus: 'SAVING' 
}); 
case SAVE_PEOPLE_FAILURE: 
return Object.assign({}, state, { 
saveStatus: 'ERROR' 
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} 
case SAVE_PEOPLE_SUCCESS : 
return Object.assign({}, state, { 
people: action.people, 
person: { 
Name: '! 
email: '" 
course: null, 
department: null 
}, 
SaveStatus: 'SUCCESS' 
}); 
default: 
return state; 
} 
} 























仅 通过 查看 这 些 action 和 reducer， 我 们 就 能 看 到 可 以 更 新 状态 的 所 有 方法 。 这 是 Redux 的 一 大 
优点 。 因 为 每 件 事 都 是 如 此 明确 ， 所 以 状态 变 得 非常 容易 推 打 和 测试 。 


现在 已 确定 了 状态 的 形状 以 及 如 何 去 更 改 它 , 接着 我 们 将 创建 一 个 store, 然后 需要 进行 一 些 修 改 ， 
以 便 表 单 可 以 正确 地 跟 它 连接 。 
6.5.1 Form 组 件 


现在 已 用 Redux 创建 了 应 用 程序 数据 架构 的 基础 , 下面 可 以 调整 表单 组 件 来 适 配 它 ,大体 上 来 说 ， 
我 们 需要 删除 与 API 客户 端的 所 有 交互 ( 现在 它 由 异步 动作 创建 器 处 理 )， 并 将 依赖 关系 从 组 件 级 别 
的 state 转移 到 props ( Redux 状态 将 作为 props 传递 )。 

需要 做 的 第 一 件 事 是 设置 propTypes ， 使 其 与 我 们 期 望 从 Redux 获得 的 数据 保持 一 致 : 


forms/src/11-redux-form.js 























































































































static propTypes = { 
people: PropTypes.array.isRequired, 
isLoading: PropTypes.bool .isRequired ， 
saveStatus: PropTypes.string.isRequired, 
fields: PropTypes.object, 
onSubmit: PropTypes. func.isRequired 


二 








我 们 将 需要 一 个 与 Redux store 中 的 数据 无 关 的 附加 属性 onSubmit( ) 。 当 用 户 提交 一 个 新 人 员 时 ， 
表单 组 件 会 调用 这 个 函数 ， 而 不 是 使 用 API 客户 端 。 稍 后 将 展示 如 何 将 其 连接 到 异步 动作 创建 器 
savePeople( ) 中 。 

接 下 来 要 限制 保存 在 state 中 的 数据 量 。 我 们 保留 了 fields 和 fieldErrors 属性 ， 但 删除 了 
people、_1loading 和 _saveStatus 属性 ， 因 为 这 些 可 以 从 props 中 获得 。 下 面 是 更 新 后 的 state: 


forms/src/11-redux-form.js 



























































state = { 
fields: this.props.fields || { 
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name : 


email: '', 
course: null, 
department: null 


}; 


fieldErrors: {} 


}b; 























state. fields 将 被 初始 化 为 props. fields (如 果 该 值 未 提供 ， 则 是 默认 字段 )。 此 外 ， 如 果 从 
props 中 获得 了 新 的 fields 对 象 ， 那 么 我 们 会 更 新 state: 


forms/src/11-redux-form.js 











getDerivedStateFromProps(update) { 
console.1log('this.props.fields', this.props.fields, update); 


return {fields: update. fields}; 
} 











现在 props 和 state 已 就 绕 ， 我 们 可 以 删除 对 apiclient 的 任何 使 用 ， 因 为 apiClient 将 由 蜡 
步 动 作 创建 器 来 处 理 ,。 使 用 API 客户 端的 两 个 地 方 是 componentDidMount() 和 onFormSubmit( ) 水 数 。 

因为 componentDidMount() 函数 的 唯一 目的 就 是 使 用 API 客户 端 ， 所 以 我 们 需要 将 其 完全 删除 。 
在 onFormSubmit( ) 函数 中 , 我 们 需要 删除 与 API 相关 的 代码 块 ， 并 调用 props .onSubmit( ) 函数 来 替 
换 它 : 


forms/src/11-redux-form.js 



























































onFormSubmit = evt => { 
const person = this.state.fields; 


evt .preventDefault(); 
if (this.validate()) return; 


this.props.onSubmit([...this.props.people, person|]); 
上 








解决 了 所 有 的 这 些 问题 后 ， 就 可 以 对 render( ) 方 法 进行 一 些小 更 新 。 实 际 上 ， 对 render( ) 方 法 
唯一 的 修改 是 用 props 中 相对 应 的 属性 奉 换 对 state._loading 、state._saveStatus 和 
state.people 的 引用 。 


























三 














forms/src/11-redux-form.js 





render() { 
if (this.props.isLoading) { 
return 《img alt="loading" src="/img/loading.gif" />; 


} 


const dirty = Object.keys(this.state.fields).1ength; 
let status = this.props.saveStatus; 
if (status === 'SUCCESS' && dirty) status = 'READY'; 
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return ( 
<div> 
<h1i>Sign Up Sheet</h1> 


<form onSubmit={this.onFormSubmit}> 
<Field 
placeholder="Name" 
name=" name " 
value={this.state. fields.name} 
onChange={this .onInputChange} 
validate={val => (val ? false : 'Name Required')} 


/> 
br /3 


<Field 
placeholder="Email" 
name="email" 
value={this.state. fields.email} 
onChange={this .onInputChange} 
validate={val => (isEmail(val) ? false : 'Invalid Email')} 


/> 
br ys 


<CourseSelect 
department={this.state. fields.department} 
course={this.state. fields.course} 
onChange={this .onInputChange} 


Ry 
<br /> 
{ 
{ 
SAVING: 《input value="Saving..." type="submit" disabled />， 
SUCCESS: “input value="Saved!" type="submit" disabled />», 
ERROR: ( 
<input 
value="Save Failed - Retry?" 
type="submit" 
disabled={this.validate( )} 
/> 
), 
READY: ( 
<input 
value="Submit" 
type="submit" 
disabled={this.validate( )} 
2 
) 
}[status] 
} 


</ form> 
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<div> 
<h3>People</h3> 
<U1》> 
{this.props.people.map(({name, email, department, course}, i) => ( 
<1i key={i}>{[name, email, department, coursel] .join(' - ')}</1i> 
))} 
/UL 
*/divy 
《</div> 
)3 
} 





你 可 能 注意 到 了 我 们 对 saveStatus 的 处 理 有 些 不 同 。 在 上 一 次 迭代 中 ， 表 单 组件 

2 能 够 控制 state._saveStatus 并 可 以 在 字段 更 改 时 将 其 设置 为 'READY' 。 而 在 此 版 
本 中 ， 我 们 是 从 props.saveStatus 中 获取 该 信息 ， 且 它 是 只 读 的 。 此 问题 的 解决 
办 法 是 检查 state.fields 是 否 存在 键 。 如 果 存 在 ， 我 们 就 可 以 知道 用 户 已 输入 了 
数据 ， 并 可 以 将 按钮 设置 回 “ 就 绪 ” 状 态 。 


6.5.2 ”连接 store 

此 时 有 了 action 、reducer 和 改进 版 的 表单 组 件 ， 剩 下 的 工作 就 是 将 它们 连接 起 来 。 
首先 ， 需 要 使 用 Redux 的 createStore( ) 方 法 从 reducer 中 创建 一 个 store。 因 为 我 们 希望 能 够 分 
派 异 步 动作 , 所 以 还 需要 使 用 来 自 redux-thunk 模块 的 thunkMiddleware。 要 在 store 中 使 用 中 间 件 ， 
我 们 需要 使 用 Redux 的 applyMiddleware() 方 法 ， 像 下 面 这 样 : 


forms/src/11-redux-app.js 












































const store = createStore(reducer, applyMiddleware(thunkMiddleware)); 




















接 下 来 将 使 用 react-redux 中 的 connect() 方 法 来 优化 表单 组 件 以 便 与 Redux 一 起 使 用 。 为 此 ， 
我 们 提供 了 两 个 方法 : mapStateToProps 和 mapDispatchToProps。 
使 用 Redux 时 ， 我 们 需要 组 件 去 订阅 store， 但 react-redux 可 以 为 我 们 做 到 这 一 点 。 我 们 需要 
做 的 就 是 提供 一 个 mapStateToProps 水 数 ,该 限 数 定义 了 store 中 的 数据 与 组 件 的 props 之 间 的 映射 。 
在 应 用 程序 中 ， 它 们 排列 得 非常 整齐 ， 如 下 所 示 


forms/src/11-redux-app.js 



































function mapStateToProps(state) { 
return { 
isLoading: state.isLoading, 
fields: state.person, 
people: state.people, 
saveStatus: state.saveStatus 
下 
} 











在 表单 组 件 中 ， 当 用 户 提交 并 验证 通过 时 ， 我 们 会 调用 props .onSubmit( ) 函数 。 我 们 希望 此 行 
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为 能 分 派 savePeople( ) 异 步 动 作 创 建 器 。 为 此 ， 我 们 提供 了 mapDispatchToProps( ) 函数 来 定义 
props .onSubmit( ) 也 数 和 分 派 动 作 创 建 右 之 间 的 连接 : 


forms/src/11-redux-app.js 





function mapDispatchToProps(dispatch) { 
return { 
onSubmit: people => { 
dispatch(savePeople(people)); 
} 
> 
} 
































创建 了 这 两 个 函数 后 ， 我 们 使 用 react-redux 中 的 connect() 方 法 来 提供 一 个 优化 后 的 
ReduxForm 组 件 : 





forms/src/11-redux-app.js 





const ReduxForm = connect(mapStateToProps，mapDispatchToProps)(Form) ; 


























最 后 一 步 是 将 store 和 ReduxForm 组 件 整合 到 应 用 程序 中 。 此 时 应 用 程序 是 一 个 非常 简单 的 组 件 ， 
它 只 有 两 个 方法 : componentDidMount() 和 Trender()。 

在 componentDidMount() 方 法 中 ， 我 们 分 派 了 fetchPeople( ) 异 步 动 作 以 从 服务 器 中 加 载 人 员 
列表 : 


forms/src/11-redux-app.js 





componentDidMount() { 
store.dispatch( fetchPeople( )); 
} 






































在 render( ) 方 法 中 ,我 们 使 用 了 一 个 非常 有 用 的 Provider 组 件 , 它 是 从 react-redux 中 获取 的 。 
Provider 组 件 使 得 store 对 其 所 有 子 组 件 可 用 。 只 需 将 ReduxForm 组 件 作 为 Provider 组 件 的 子 元 素 
放置 ， 应 用 程序 就 可 以 运行 了 : 


forms/src/11-redux-app.js 




































































render() { 
return ( 
<Provider store={store}> 
<ReduxForm /> 
</Provider> 
); 
} 




















就 是 这 样 。 现 在 表单 完全 适 配 基于 Redux 的 数据 架构 。 
阅读 完 本 章 后 ， 你 应 该 已 很 好 地 掌握 了 React 的 表单 基础 。 也 就 是 说 ， 如 果 你 想 将 表单 处 理 的 某 
些 部 分 外 包 给 外 部 模块 ， 那 么 这 里 有 多 种 选择 。 继 续 阅 读 可 以 获取 一 些 更 流行 的 选择 列表 。 
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6.6 ”表单 模块 


6.6.1 formsy-react 

formy-react 试图 平衡 灵活 性 和 可 重用 性 。 这 是 一 个 值得 实现 的 目标 ， 因 为 该 模块 的 作者 承认 表 
单 、 输 入 和 验证 在 项 目 之 间 的 处 理 方式 大 不 相同 。 

通常 使 用 的 模式 是 将 Formsy .Form 组 件 用 作 表 单元 素 , 并 提供 你 自己 的 输入 组 件 作为 子 组 件 (使 
用 Formsy .Mixin )。Formsy .Form 组 件 具 有 诸如 onValidsSubmit() 和 onInvalid() 之 类 的 处 理 程序 ， 
你 可 以 使 用 它们 来 修改 表单 父 级 的 状态 ， 且 mixin 提供 了 一 些 验证 和 其 他 的 通用 帮助 程序 。 

















































































































6.6.2 Teact-input-enhancements 


react-input-enhancements 是 五 个 丰富 组 件 的 集合 ， 你 可 以 使 用 它们 来 增强 表单 。 这 个 模块 有 
一 个 很 好 的 示例 ， 展 示 了 使 用 Autosize 、Autocomplete 、Dropdown 、Mask 和 DatePicker 组 件 的 方 | 次 
法 。 作 者 明确 指出 它们 还 没有 准备 好 用 于 生产 环境 ， 而 是 更 具 概 念 性 。 也 就 是 说 ， 如 果 你 正在 找 一 个 
日 期 选择 器 或 自动 补 全 元 素 ， 那 么 它们 可 能 很 有 用 。 































































































6.6.3 tcomb-form 


tcomb-form 使 用 的 是 tcomb 模型 ， 它 以 领域 驱动 设计 为 中 心 。 甚 思想 是 一 旦 创建 了 模型 ， 就 可 
以 自动 生成 相应 的 表单 。 从 理论 上 讲 ， 这 样 做 的 好 处 是 无 须 编 写 太 多 的 标记 代码 就 可 以 免费 获得 表单 
的 可 用 性 和 可 访问 性 ( 例如 自动 标签 和 内 联 验证 ), 且 表 单 将 自动 与 模型 的 变化 保持 同步 。 如 果 tcomb 
模型 比较 适合 你 的 应 用 程序 ， 那 么 tcomb-form 值得 考虑 。 






















































































6.6.4 winterfell 


如 果 你 的 应 用 程序 完全 使 用 JSON 定义 表单 和 字段 ， 那 么 winterfell 可 能 适合 你 。 使 用 
winterfell, 你 可 以 用 JSON 模式 绘制 整个 表单 。 该 模式 是 一 个 大 对 象 , 你 可 以 在 其 中 定义 CSS 类 名 、 
节 标 头 、 标 签 、 验 证 需求 、 字 段 类 型 和 条 件 分 支 等 。 

winterfell 分 为 “表单 面板 "” “问题 面板 ”和 “问题 集 ” 三 个 部 分 。 每 个 面板 都 有 一 个 ID, 该 ID 
用 于 分 配 集合 。 这 种 方法 的 一 个 好 处 是 如 果 你 创建 或 修改 了 很 多 表单 ， 就 可 以 创建 一 个 UI 来 创建 或 
修改 这 些 模式 对 象 ， 并 将 它们 保存 到 数据 库 中 。 

















































































































6.6.5 react-redux-form 


如 果 Redux 更 符合 你 的 风格 ， 那 么 react-redux-form 更 适合 你 ， 它 是 “动作 创建 器 和 reducer 
创建 器 的 集合 ”， 用 于 简化 “使 用 React 和 Redux 构建 复杂 的 自 定义 表单 ”的 过 程 。 在 实践 中 ， 这 个 模 
块 提供 了 modelReducer 和 formReducer 助手 ,可 以 在 创建 Redux store 时 使 用 。 然后， 可 以 在 表单 中 
使 用 它 提 供 的 Form、Fielgd 和 Error 组 件 来 帮助 将 1abel 和 input 元 素 连接 到 对 应 的 reducer、 设 置 验 
证 要 求 和 显示 对 应 的 错误 。 简 而 言 之 , 这 是 一 个 很 好 的 简单 包装 器 , 可 以 帮助 你 使 用 Redux 构建 表单 。 


























































































































Webpack 与 Create React 
App 结合 使 用 














在 之 前 的 大 多 数 项 目 中 ， 我 们 在 应 用 程序 的 index.html 文件 中 使 用 script 标签 加 载 了 React: 


<script src='vendor/react.js'></script> 


<Script src='vendor/react-dom. 














js'></script> 


因为 我 们 一 直 在 使 用 ES6， 所 以 也 一 直 在 使 用 script 标签 加 载 Babel 库 : 


<Script src='vendor/babel-standalone.js'> </script> 


























通过 此 设置 , 我 们 已 能 够 在 index.html 中 加 载 所 需 的 任何 ES6 JavaScript 文件 , 并 指定 其 类 型 为 


text/babel: 


<script type='text/babel' src='./client.js'></script> 
Babel 会 处 理 文 件 的 加 载 ， 并 将 ES6 JavaScript 转换 为 可 用 于 浏览 器 的 ES5 JavaScript。 
加 如 果 你 需要 复习 一 下 设置 策略 ， 请 查看 第 1 章 ， 其 中 进行 了 详细 的 介绍 。 





我 们 从 这 个 设置 策略 开始 ， 因 为 它 是 最 简单 的 。 只 需要 很 少 的 设置 即 可 开始 在 ES6 中 编写 React 


组 件 。 
但 这 种 方法 有 局 限 性 。 就 我 们 的 





7.1_ JavaScript 模块 








我 们 在 之 前 的 应 用 程序 中 看 到 过 模块 。 例 如 时 间 跟 踪 应 用 
定义 了 一 些 函数 , 例如 getTimers()。 然 后 把 window.client 设置 成 一 个 对 象 ， 它 将 每 个 函数 作为 属 











性 “公开 ”出 来 。 该 对 象 如 下 所 示 : 














目的 而 言 ， 最 要 紧 的 限制 是 缺乏 对 JavaScript 模块 的 支持 。 

















bmn 


程序 具有 Client 模块 。 该 模块 的 文件 


























蝇 





// window.client 被 设置 成 这 个 对 象 


// 每 个 属性 都 是 一 个 函数 
{ 
getTimers, 
createTimer, 
updateTimer, 
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startTimer, 
stopTimer, 
deleteTimer, 

}; 

此 Client 模块 仅 公 开 了 这 些 函 数 。 这 些 是 client 模块 的 公共 方法 。 public/js/client.js 文件 
还 包含 其 他 函数 定义 ， 比 如 checkStatus() ， 它 用 来 验证 服务 器 是 否 返 回 了 2xx 响应 代码 。 因 为 每 个 
公共 方法 在 内 部 都 使 用 checkStatus( ) 函数 ， 所 以 checkStatus( ) 函数 保持 私有 ， 它 只 能 从 模块 内 部 
访问 。 

这 就 是 软件 模块 背后 的 思想 。 比 如 你 有 一 个 独立 的 软件 系统 组 件 ， 它 负责 一 些 独立 的 功能 。 模 块 
向 系统 的 其 余部 分 公开 一 个 有 限 的 接口 ,理想 情况 下 是 系统 其 余部 分 有 效 使 用 该 模块 所 需 的 最 小 可 行 
接 口 [oe] 

在 React 中 ， 可 以 将 每 个 单独 的 组 件 看 作 它们 自己 的 模块 。 每 个 组 件 负 责 接口 的 一 些 独 立 部 分 。 
React 组 件 可 能 包含 自己 的 状态 或 执行 复杂 的 操作 ， 但 它们 的 接口 都 是 相同 的 : 接收 输入 (props ) 并 
输出 DOM 表示 (render )。React 组 件 的 用 户 不 需要 知道 任何 的 内 部 细节 。 

为 了 使 React 组 件 真正 模块 化 ， 理 想 情 况 下 应 该 让 它们 位 于 自己 的 文件 中 。 在 该 文件 的 最 大 作用 
域 中 , 组 件 可 能 会 定义 仅 组 件 能 够 使 用 的 样式 对 象 或 辅助 函数 。 但 是 我 们 希望 组 件 模块 只 公开 其 组 件 
本 身 。 

在 ES6 之 前 ，JavaScript 原生 并 不 支持 模块 。 开 发 人 员 会 使 用 各 种 不 同 的 技术 来 开发 模块 化 的 
JavaScript。 有 些 解决 方案 只 在 浏览 句 中 有 效 ， 它们 依赖 于 浏览 器 环境 ( 比如 window 是 否 存在 )， 其 他 
的 只 能 在 Node.js 中 正常 工作 。 

浏览 器 还 不 支持 ES6 模块 ， 但 ES6 模块 是 未 来 的 发 展 方向 。 它 的 语法 是 直观 的 ， 避 免 了 在 ES5 中 
用 奇怪 的 策略 ， 且 它 在 浏览 器 内 部 和 外 部 都 可 以 正常 工作 。 因 此 ，React 社区 迅速 采用 了 ES6 模块 。 

















































































































澳 如 果 你 看 过 time_tracking_app/public/js/client.js， 就 会 发 现 创 建 ES5 
JavaScript 模块 的 技术 有 多 么 奇怪 。 


然而 , 由 于 模块 系统 的 复杂 性 , 我 们 不 能 简单 地 使 用 ES6 的 import/export 语法 并 期 望 它 在 浏览 
髓 中 能 “正常 工作 ”， 即 使 使 用 了 Babel 也 不 行 。 它 需要 使 用 更 多 的 工具 。 

出 于 这 个 及 其 他 原因 , JavaScript 社区 广泛 采用 了 JavaScript 捆绑 器 。 我 们 将 看 到 ，JavaScript 捆绑 
器 允许 我 们 编写 模块 化 的 ES6 JavaScript， 它 能 在 浏览 器 中 无 缝 运行 , 但 这 不 是 全 部 , 捆绑 器 还 有 很 多 
优点 。 它 提供 了 用 于 组 织 和 分 发 Web 应 用 程序 的 策略 ; 拥有 强大 的 工具 链 ， 可 用 于 迭代 开发 和 生成 生 
产 优 化 的 构建 。 

JavaScript 捆绑 器 可 以 有 多 种 选择 ,但 React 社区 最 喜欢 的 是 Webpack。 

然而 Webpack 这 样 的 捆绑 器 也 有 一 个 重要 的 权衡 : 它们 增加 了 Web 应 用 程序 设置 的 复杂 性 。 初 
始 配置 可 能 会 很 困难 ， 但 最 终 你 会 得 到 一 个 拥有 更 多 动态 部 件 的 应 用 程序 。 

为 了 应 对 设置 和 配置 问题 ， 社 区 创建 了 大 量 的 样板 和 库 ， 开 发 人 员 可 以 使 用 它们 来 启动 更 高 级 的 
React 应 用 程序 。 但 是 React 核心 团队 认识 到 ， 只 要 没有 他 们 认可 的 解决 方案 , 社区 就 很 可 能 会 继续 
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保持 分 裂 。 不 管 对 于 新 手 或 有 经 验 的 开发 人 员 来 说 ， 使 用 拥 绑 器 驱动 React 设置 的 第 一 步 可 能 会 让 
他 们 感到 困惑 。 


React 核心 团队 通过 创建 Create React App 项 目 来 对 这 个 问题 做 出 回应 。 











7.2 Create React App 


create-react-app 库 提供 了 一 个 命令 ， 可 用 于 启动 一 个 新 的 由 Webpack 驱动 的 React 应 用 程序 : 


$ create-react-app my-app-name 


该 库 会 为 你 配置 一 个 “ 黑 盒 ”的 Webpack 设置 。 它 提供 了 Webpack 设置 的 好 处 , 同时 抽象 了 配置 
细节 。 

Create React App 使 用 了 标准 的 约定 ， 它 是 开始 使 用 Webpack-React 应 用 程序 的 好 方法 。 因 此 , 我 
们 将 在 所 有 即将 推出 的 Webpack-React 应 用 程序 中 使 用 它 。 

本 章 将 
查看 以 ES6 模块 表示 的 React 组 件 的 效果 ; 
检查 由 Create React App 管理 的 应 用 程序 的 设置 ; 
仔细 研究 Webpack 的 工作 原理 ; 
探索 Webpack 为 开发 和 生产 使 用 提供 的 众多 优势 ; 
了 解 Create React App 的 内 部 原理 ; 
弄 清楚 如 何 让 Webpack-React 应 用 程序 与 API 一 起 工作 。 














































































































使 用 “ 黑 盒 ”控制 应 用 程序 内 部 工作 的 想法 可 能 令 人 丽 惧 。 这 是 一 个 合理 的 担忧 。 
在 本 章 后 面 ， 我 们 将 探索 Create React App 的 一 个 特性 eject ， 和 希望 它 能 缓解 这 种 
息 惧 。 


7.3 探索 Create React App 





让 我 们 开始 安装 Create React App ， 然 后 使 用 它 来 启动 一 个 Webpack-React 应 用 程序 。 可 以 使 用 -g 
标志 从 命令 行 来 全 局 安装 它 ， 这 样 就 可 以 在 系统 上 的 任何 位 置 运行 此 命令 : 


$ npm i -g create-react-app@1.4.1 





上 面 的 @1.4.1 用 于 指定 版 本 号 。 我 们 建议 使 用 这 个 版 本 ,因为 它 与 本 书 中 测试 代码 
的 版 本 相同 。 
现在 在 系统 的 任何 地 方 , 你 都 可 以 运行 create-react-app 命令 来 启动 一 个 新 的 基于 Webpack 驱 
动 的 React 应 用 程序 的 设置 。 
下 面 创建 一 个 新 的 应 用 程序 。 我 们 将 在 本 书 代码 中 来 完成 此 操作 。 从 代码 文件 夹 的 根 目录 切换 到 
本 章 的 目录 : 


$ cd webpack 
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该 目录 已 有 三 个 文件 夹 : 


$ 1s 

es6-modules/ 
food-lookup/ 
heart-webpack-complete/ 


下 一 部 分 代码 的 完整 版 本 可 在 heart-webpack-complete 中 找到 。 
运行 以 下 命令 ， 并 在 名 为 heart-webpack 的 文件 夹 中 启动 一 个 新 的 React 应 用 程序 : 


$ create-react-app heart-webpack --scripts-version=1.0.14 

















这 将 为 新 应 用 程序 创建 样板 文 作 








并 安装 依赖 项 ， 可 能 需 





上 面 的 --scripts-version 标志 很 重要 。 我 们 要 确保 你 的 react-scripts 版 本 与 本 书 中 使 用 的 版 





本 相同 。 稍 后 我 们 将 看 到 react-scripts 包 究 竞 是 什么 。 
在 完成 Create React App 后 ， 输 入 cd 命令 进入 新 目录 : 


$ cd heart-webpack 


$ 1s 

README .md 
node_modules/ 
package. json 
public/ 

src/ 





在 src/ 目 录 中 是 一 个 Create React App 提供 的 React 示例 应 用 程序 ， 它 的 目的 是 

















public/ 目 录 内 部 是 index.html， 我 们 首先 看 一 下 它 。 


7.3.1 public/index.html 
在 文本 编辑 需 中 打开 public/in 


<ldoctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" > 





<meta name="viewport" content="width=device-width, 


dex.html: 





要 一 段 时 间 o 























initial-scale=1" > 


<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" > 


<!—— 


<title>React App</title> 
</head> 
<body> 
<div id="root"></div> 
《<1—— 


</body> 
</html> 





用 于 演示 。 在 
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与 我 们 以 前 的 应 用 程序 中 使 用 的 index.html 截然 不 同 的 是 它 没有 script 标签 。 这 意味 着 该 文件 
并 没有 加 载 任 何 外 部 的 JavaScript 文件 。 我 们 很 快 就 会 知道 原因 。 























7.3.2 package. json 
在 项 目 中 的 package. json 文件 内 部 ， 可 以 看 到 一 些 依赖 关系 和 脚本 定义 : 


webpack/heart-webpack-complete/package.json 











{ 
"name": "heart-webpack", 
"version": "0.1.0", 
"private": true, 
"devDependencies": { 
"react-scripts": "1.1.1", 
"concurrently": "3.4.0" 
} 
"dependencies": { 
"react": "16.7.0", 
"react-dom": "16.7.0" 
和 
"scripts": { 
"start": "react-scripts start", 
"build": "react-scripts build", 
"test": "react-scripts test --env=jsdom", 
"eject": "react-scripts eject" 
} 
} 





让 我 们 分 解 一 下 。 
1. react-scripts 
package. json 指定 了 一 个 单独 的 开发 依赖 项 react-scripts : 


webpack/heart-webpack-complete/package.json 








"devDependencies": { 
"react-scripts": "1.1.1", 
"concurrently": "3.4.0" 











Create React App 只 是 一 个 样板 生成 器 。 该 命令 生成 了 新 的 React 应 用 程序 的 文件 结构 ,插入 了 一 
个 示例 应 用 程序 ， 并 指定 了 package. json。 实 际 上 应 该 说 是 因为 有 react-scripts 包 才 使 得 一 切 能 
正常 工作 。 

response-scripts 指定 了 应 用 程序 的 所 有 开发 依赖 项 ， 比 如 Webpack 和 Babel。 此 外 ， 它 还 包含 
了 以 传统 方式 将 所 有 这 些 依 赖 项 “黏合 ”在 一 起 的 脚本 。 





























Create React App 只 是 一 个 样板 生成 器 。 在 package.json 中 指定 的 react-scripts 
包 是 使 一 切 正常 工作 的 引擎 。 
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@ 虽然 react-scripts 是 引擎 ， 但 本 章 会 继续 把 整个 项 目 称 为 Create React App。 


2. react 和 react-dom 

在 依赖 项 中 ， 我 们 看 到 其 中 列 出 了 react 和 react-dom: 
webpack/heart-webpack-complete/package.json 

} 


"dependencies": { 
"react": "16.7.0", 
"react-dom": "16.7.0" 




















在 前 两 个 项 目 中 , 我 们 使 用 index.html 中 的 script 标签 加 载 了 react 和 react-dom。 如 我 们 所 
见 ， 这 些 库 并 没有 在 这 个 项 目的 index.html 中 指定 。 

Webpack 使 我 们 能 够 在 浏览 器 中 使 用 npm 包 。 可 以 在 package .json 中 指定 需要 使 用 的 外 部 库 。 
这 非常 有 用 。 现 在 不 仅 可 以 方便 地 访问 大 量 依赖 包 的 库 ， 而 且 可 以 使 用 npm 管理 应 用 程序 使 用 的 所 有 
库 。 稍 后 将 介绍 这 一 切 是 如 何 运 作 的 。 

3. scripts 

package. json 在 scripts 中 指定 了 四 个 命令 。 每 个 都 使 用 react-scripts 执行 一 个 命令 。 本 章 
和 下 一 章 将 深入 介绍 每 一 个 命令 ， 但 概括 来 说 ， 如 下 所 示 。 
start: 启动 Webpack 的 HTTP 开发 服务 器 。 该 服务 器 将 处 理 来 自 Web 浏览 器 的 请 求 。 
build: 提供 给 生产 中 使 用 ， 该 命令 为 所 有 资源 创建 一 个 优化 的 静态 包 。 
test : 执行 应 用 程序 的 测试 集 ( 如 果 存 在 的 话 )。 
eject :将 react-scripts 的 内 部 结构 迁移 到 你 的 项 目 目 录 中 。 这 使 你 可 以 放弃 react-scripts 
提供 的 配置 ， 并 根据 自己 的 喜好 进行 调整 。 

对 于 那些 厌倦 了 react-scripts 提供 的 黑 盒 的 人 ， 最 后 一 条 命令 是 令 人 欣慰 的 。 如 果 你 的 项 目 
“超出 ”了 react-scripts 的 能 力 , 或 者 你 需要 一 些 特殊 的 配置 , 那么 就 需要 有 这 么 一 个 “逃生 舱 口 ”。 














































































































在 package. json 中 ,你 可 以 指定 在 哪个 环境 中 需要 哪些 包 , 请 注意 ,react-scripts 
各 是 在 devDependencies 中 指定 的 。 
运行 npm i 时 ,npm 会 检查 NODE_ENV 环境 变量 以 查看 它 是 否 正 在 生产 环境 中 安装 包 。 
在 生产 环境 中 ，npm 只 安装 dependencies 中 列 出 的 包 (在 我 们 的 例子 中 是 react 
和 react-dom )。 在 开发 环境 中 ，npm 安装 所 有 包 。 这 加 快 了 生产 环境 构建 的 过 程 ， 
省 去 了 安装 不 必要 的 包 ， 如 代码 检查 或 测试 的 库 。 
鉴于 此 ， 你 可 能 想 知 道 : 为 什么 将 react-scripts 列 为 开发 依赖 项 ? 没有 它 ， 应 用 
程序 如 何在 生产 环境 中 运行 ? 在 了 解 了 Webpack 会 如 何 准备 生产 环境 的 构建 之 后 ， 
我 们 会 明白 为 什么 这 样 。 
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7.3.3 src/ 
在 src/ 内 部 ， 我 们 看 到 了 一 些 JavaScript 文件 : 


$ 1s src 
App .css 
App.js 

App .test. js 
index.css 
index.js 
logo.svg 


Create React App 创建 了 一 个 React 的 样板 应 用 程序 ， 用 于 演示 如 何 组 织 文 件 。 该 应 用 程序 只 有 一 
个 App 组 件 ， 它 位 于 App.js 中 。 


1. App. js 
看 一 下 src/App. js 内部; 
webpack/heart-webpack-complete/src/App.js 








import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 


class App extends Component { 
render() { 
return ( 
<div className="App"> 
<div className="App-header"> 
<img src={1logo} className="App-1logo" alt="1ogo" /> 
<h2>Welcome to React/h2> 
</div> 
<p className="App-intro"> 
To get started, edit <code>src/App.js</code> and save to reload. 
</p> 
</div> 
关 
} 
} 


export default App; 











这 里 有 一 些 值得 注意 的 特性 。 
2. import 语句 

在 文件 的 顶部 导入 React 和 Component : 
WwWebpack/heart-webpack-compjlete/src/App.js 











import React, { Component } from 'Treact ' 





这 是 ES6 模块 的 导入 语法 。Webpack 将 通过 'react ' 来 推断 出 我 们 引用 的 是 package. json 中 指定 
的 npm 包 。 
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® 如 果 不 熟 悉 ES6 模块 ， 请 查看 附录 B 中 的 条 目 。 


你 可 能 会 对 接 下 来 的 两 项 引用 感到 惊讶 : 
webpack/heart-webpack-complete/src/App.ijs 





import logo from './logo.svg'; 
import './App.css'; 











我 们 对 非 JavaScript 文件 使 用 了 import! Webpack 可 以 让 你 使 用 此 语法 指定 所 有 的 依赖 项 。 稍 后 
我 们 将 了 解 它 是 如 何 发 挥 作用 的 。 因 为 这 些 路 径 是 相对 的 ( 路 径 前 面 有 ./ )， 所 以 Webpack 知道 我 们 
引用 的 是 本 地 文件 ， 而 不 是 npm 包 。 

3. App 组 件 是 一 个 ES6 模块 

App 组 件 本 身 很 简单 ， 它 不 使 用 state 或 props。 它 的 返回 方法 只 1 是 标记 代码 ， 稍 后 我 们 会 看 到 
它 的 泻 染 。 

App 组 件 的 特别 之 处 在 于 它 是 一 个 ES6 模块 。 它 位 于 自己 专用 的 App.js 中 。 在 这 个 文件 的 顶部 ， 
它 指 定 了 自己 的 依赖 关系 ， 且 在 底部 指定 了 它 的 导出 : 

webpack/heart-webpack-complete/src/App.ijs 



























































export default App; 








React 组 件 在 这 个 模块 中 完全 独立 。 任 何其 他 的 库 、 样 式 和 图 像 都 可 以 在 顶部 指定 。 任 何 开发 人 
员 打 开 这 个 文件 都 可 以 快速 推断 出 这 个 组 件 有 哪些 依赖 关系 。 我 们 可 以 定义 组 件 私有 且 外 部 无 法 访问 
的 辅助 函数 。 
此 外 ， 回 想 一 下 除了 App.css 外 ，src/ 目 录 中 还 有 一 个 与 App 组 件 相 关 的 文件 : App.test.js。 
因此 有 三 个 与 组 件 相 对 应 的 文件 : 组 件 本 身 (一 个 ES6 模块 )、 一 个 专用 的 样式 表 和 一 个 专用 的 测试 
文件 。 
Create React App 已 为 React 应 用 程序 提供 了 强大 的 组 织 范 式 。 虽然 这 在 单 组 件 应 用 程序 中 可 能 并 
不 明显 , 但 可 以 想象 ， 随 着 组 件数 量 增加 到 成 百 上 千 ， 该 模块 化 组 件 模型 将 能 很 好 地 扩展 。 

我 们 知道 了 模块 组 件 是 在 哪里 定义 的 ， 但 遗漏 了 一 个 关键 的 部 分 : 组 件 在 哪里 写 人 DOM? 

答案 就 在 src/index. js 中 。 





















































7.3.4 index. js 





打开 src/index.js: 


webpack/heart-webpack-complete/src/index.js 





import React from 'react'; 

import ReactDOM from 'react-dom'; 
import App from './App'; 

import './index.css'; 
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ReactDOM .render( 
<App />， 
document .getElementById('root ' ) 


) 





逐步 浏览 此 文件 ,我 们 首先 导入 了 react 和 react-dom。 因 为 我 们 将 App 组 件 指定 为 App. js 的 
默认 导出 ， 所 以 可 以 在 此 处 将 其 导入 。 再 次 提醒 一 下 ， 相 对 路 径 ( ./App ) 会 向 Webpack 发 出 信号 表 
示 我 们 引用 的 是 本 地 文件 ， 而 不 是 npm 包 。 

此 时 ， 可 以 像 过 去 一 样 使 用 App 组 件 。 我 们 调用 ReactDOM.render( ) 方 法 ， 并 将 组 件 泻 染 到 根 
div 上 的 DOM。 此 div 标签 是 index.html 中 存在 的 唯一 div。 

这 种 布局 肯定 比 我 们 在 前 几 个 项 目 中 使 用 的 更 为 复杂 。 我 们 不 是 在 定义 App 组 件 的 地 方 泻 染 它 ， 
而 是 在 男 一 个 文件 中 导入 App 并 在 ReactDOM.render( ) 方 法 中 调用 。 同 样 ， 这 个 设置 是 为 了 保持 代码 
模块 化 。App.js 仅 限 于 定义 一 个 React 组 件 。 它 不 承担 泻 染 该 组 件 的 其 他 额外 的 责任 。 按 照 这 种 模式 ， 
可 以 轻松 地 在 应 用 程序 中 的 任何 位 置 导 入 并 泻 染 此 组 件 。 

现在 我 们 知道 了 ReactDOM.render() 方 法 调用 的 位 置 ， 但 是 这 种 新 设置 的 工作 方式 仍 不 明确 。 
index.html 似乎 并 未 在 任何 JavaScript 中 加 载 ， 但 JavaScript 模块 是 如 何 将 其 添加 到 浏览 器 的 ? 

下 面 启动 这 个 应 用 程序 ， 然 后 探索 如 何 将 所 有 东西 组 合 在 一 起 。 


© 为 什么 在 文件 顶部 导入 React? 显然 它 没有 在 任何 地 方 被 引用 。 
实际 上 React 在 文件 的 后 面 被 引用 了 ， 因 为 有 一 个 中 间 层 ， 所 以 我 们 看 不 到 它 。 我 
们 使 用 了 JSX 来 引用 App 组 件 ， 即 JSX 中 的 这 一 行 : 














































































































<APP /> 


实际 上 下 面 这 一 行 才 是 该 JSX 的 抽象 : 


React .createElement(App, null); 


7.3.5 ”启动 应 用 程序 

在 heart-webpack 的 根 目 录 运 行 启动 命令 : 

$ npm start 

这 启动 了 Webpack 开发 服务 器 。 我 们 马上 深入 研究 这 个 服务 器 的 细节 。 

访问 http://localhost:3660/ ， 可 以 看 到 Create React app 提供 的 示例 应 用 程序 的 界面 ， 见 
图 7-1。 
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四 日 四 辆 React App x React 


€ GC © localhost:300 





Welcome to React 





To get started, edit src/app.js and save to reload. 








图 7-1 示例 应 用 程序 














页 面 上 清楚 地 显示 了 App 组 件 。 可 以 看 到 组 件 指定 的 logo 和 文本 。 它 是 怎么 到 达 浏 览 器 页 面 的 ? 


下 面 来 看 这 个 页 面 的 源 代码 。 在 Chrome 和 Firefox 中 ， 你 可 以 在 地 址 栏 中 输入 view-source: 
http://1localhost:3866/ 来 打开 源 代码 : 


<ldoctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="shortcut icon" href="/favicon.ico"> 
<1—— 


… 注释 几 略 a 











<title>React App</title> 
“</head> 
<body> 
<div id="root"></div> 
<1—— 


注释 省 略 i 
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<Script type="text/javascript" src="/static/js/bundle.js"></script></body》> 
</html> 


这 个 index.html 看 起 来 和 我 们 之 前 看 到 的 一 样 , 但 是 有 一 个 关键 的 区 别 : 它 在 body 的 底部 附加 
了 一 个 script 标签 。 该 script 标签 引用 了 一 个 bundle.js。 如 我 们 所 见 ，App.js 中 的 App 组 件 和 
index. js 中 的 ReactDOM.render() 方 法 调用 都 位 于 该 文件 中 。 

Webpack 开发 服务 器 把 这 一 行 插入 index.html 中 。 要 理解 bundle. js 是 什么 ， 需 要 深入 研究 
Webpack 是 如 何 工 作 的 。 











A 此 脚本 默认 将 服务 器 的 端口 设置 为 3990。 但 是 ， 它 如 果 检 测 到 386@ 端口 被 占用 ， 
就 会 选择 其 他 的 端口 。 该 脚本 将 告诉 你 服务 器 在 哪个 端口 运行 , 因此 请 检查 控制 台 ， 
看 它 是 否 在 http://localhost:3000/ 页 面 上 。 


@ 如 果 你 使 用 的 是 OS 义 ， 此 脚本 会 自动 打开 一 个 指向 http://1localhost:3866/ 的 浏 


II ge 人 > 


见 大 鲜 口 。 


7.4 Webpack 基础 


第 一 个 应 用 程序 ( 投票 应 用 程序 ) 中 使 用 了 http-server 库 来 为 静态 资源 提供 服务 ， 比 如 
index.html 、JavaScript 文件 以 及 图 像 。 
第 二 个 应 用 程序 (计时 器 应 用 程序 ) 中 使 用 了 一 个 小 型 Node 服务 器 来 为 静态 资源 提供 服务 。 我 
们 在 server .js 中 定义 了 一 个 服务 器 , 它 既 提供 一 组 API 端点 ， 又 为 public/ 目 录 下 的 所 有 资源 提供 
服务 。 所 以 API 服务 器 和 静态 资源 服务 器 是 同一 个 。 
使 用 了 Create React App 后 ， 静 态 资 源 就 由 Webpack 开发 服务 器 提供 服务 ， 它 在 运行 npm start 
时 启动 。 目 前 还 没有 使 用 API。 
如 我 们 所 见 , 原始 的 index.html 不 包含 对 React 应 用 程序 的 任何 引用 。Webpack 在 向 浏览 器 提供 
服务 之 前 , 会 在 index.html 中 插入 对 bundle. js 的 引用 。 如 果 你 在 磁盘 上 查找 ,就 会 发 现 bundle. js 是 
不 存在 的 。Webpack 开发 服务 器 会 实时 生成 此 文件 并 将 其 保存 在 内 存 中 。 当 浏览 器 向 localhost:3088/ 
发 出 请 求 时 ，Webpack 会 把 内 存 中 已 修改 后 的 index.html 和 bundle.js 的 版 本 提供 出 来 作为 服务 。 
切换 到 页 面 view-source:http://localhost:3099/， 你 可 以 在 浏览 器 中 点 击 /static/js/bundle. js 
并 打开 该 文件 。 可 能 需要 几 秒 钟 才能 打开 ， 因 为 这 是 一 个 巨大 的 文件 。 
bundle.js 包含 了 应 用 程序 运行 所 需 的 所 有 JavaScript 代码 , 它 不 仅 包 含 了 App.js 的 整个 源 代码 ， 
而 且 还 包含 了 React 库 的 整个 源 代 码 ! 
你 可 以 在 这 个 文件 中 搜索 字符 串 . /src/App.js。Webpack 用 一 个 特殊 的 注释 来 划分 它 包含 的 每 个 
单独 的 文件 。 你 会 发 现 非常 混乱 ， 见 图 7-2。 
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目 © 9 / 国 view-source:localhost:3000 x) 国 localhost:3000/static/is/bund x | React | 
CGO Ilocalhost:3000/staticjjs/bundle.js 六 

AR Ys |./src/App.is| AYV|x 

1* 258 */ 


上 1 订 训 妆 尖山 内 站 朗 衣 衣 内 认识 内 商 浪 半 朗 内 大 上 冯 入 
大 去 庆 朗 大 大 上 | 
从 天 广 主 穴 广 测 南 充 认 市 六 次 产 刘 二 击 证 市 坝 
1***/ function(module, exports, _ wespack require ) I 


eval("'use strict';\n\nObject.defineProperty(exports, \"_ esModule\", 


webpack/src/App.js';\n\nvar createClass = function () { function 
defineProperties(target, props) { for (var i = 0; i < props.length; i++) { Var 
descriptor = props':i]; descriptor .enlmerable = descriptor.enumerable || false; 
descriptor.configurable = true; if {(\"value\" in descriptor) descriptor .writab 
Qbject.defineProperty(target, descriytor.key, descriptor); } } return function 
{Constructor, protoProps, staticProps) { if (protoProps) 
defineProperties(Constructor.prototyse, protoProps); if (staticProps) 
defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar 
_Wwebpack require (/*! react */ 87);\n\nvar react2 = 


259);\n\nvar logo? = jinteropRequiraDefault(_ logo);\n\n webpack require (/* 
‘/App.css */ 260);\n\nfunction interopRequireDefault(obj) { return obj && 








图 7-2 在 bundle.js 中 搜索 字符 串 ./src/App .js 


如 果 你 稍微 搜索 一 下 ， 就 可 以 在 混乱 中 看 到 一 些 可 识别 的 App.js 片段 。 
虽然 看 起 来 一 点 也 不 像 。 


Webpack 已 对 所 有 包含 的 JavaScript 执行 了 一 些 转换 。 值 得 注意 的 是 ， 它 使 用 Babel 将 ES6 代码 


转换 为 与 ES5 兼容 的 格式 。 


{\n 


value: true\n});\nvar _jsxFileName = '/Users/acco/OneDrive/work/book-scratch/heart- 


le = true; 


_react = 


_interopRequireDefault{(_react);\n\nvar _logo = _ webpack require {/*! ./logo.svg */ 


1 


这 确实 是 





我 们 的 组 件 ， 


如 果 你 查看 App. js 的 注释 头 部 ， 就 会 看 到 一 个 数字 。 在 图 7-2 中 ， 这 个 数字 是 258: 


/* 258 */ 

/ 炒 ! 炒米 炒米 来 炒米 炒米 炒米 炒米 炒米 炒米 炒米 玉米 \ 
lx*** ./Src/App.js ***! 
\\ 米 炒米 炒米 炒米 炒米 来 炒米 炒米 炒米 炒米 炒米 / 


信 你 的 模块 ID 可 能 与 上 面 文本 中 的 不 同 。 


模块 本 身 封装 在 一 个 如 下 的 函数 中 : 

function(module，exports，_ webpack_require_ ) { 
// 这 里 是 混乱 的 App.js 代码 

} 


Web 应 用 程序 的 每 个 模块 都 封装 在 具有 此 签名 的 函数 中 。Webpack 已 为 应 用 程序 的 每 个 模块 提供 


了 此 函数 容器 以 及 一 个 模块 ID ( 对 于 App. js 来 说 是 258 )。 
但 这 里 的 “模块 ”并 不 限于 JavaScript 模块 。 
还 记得 我 们 是 如 何在 App. js 中 导入 logo 的 吗 ? 如 下 所 示 : 
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webpack/heart-webpack-complete/Src/App.js 





import logo from './logo.svg'; 





然后 在 组 件 的 标记 代码 中 ， 它 被 用 于 在 img 标签 上 设置 src: 
webpack/heart-webpack-complete/src/App.ijs 











<img src={10go} className="App-1logo" alt="1ogo" /> 








下 i 


I 


| 是 在 混乱 的 App.js 的 Webpack 模块 中 1ogo 的 变量 声明 : 























var _logo = _ webpack_require_(/*! ./logo.svg */ 259); 
这 看 起 来 很 奇怪 ， 主 要 是 由 于 Webpack 为 调试 目的 提供 的 内 联 注释 。 删 除 该 注释 : 
var _logo = _ webpack_require_ (259); 


我 们 没有 使 用 import 语句 ， 而 是 使 用 了 普通 的 旧 ES5 代码 。 不 过 它 是 在 做 什么 呢 ? 


想 找 到 答案 ， 需 要 在 此 文件 中 搜索 ./src/1o0go.svg( 它 应 该 会 直接 出 现在 App.js 下 面 )。 可见 
SVG 也 在 bundle. js 中 表示 ( 见 图 7-3 )! 











9/ 国 view-source:localhost:3000 x) 国 localhost:3000/static/jis/bund x \ | Reacl 
GC | © localhost:3000/static/js/bundle.js 广 

Set started, edit ',\n _reacst2.default .ci 全 

1\n _source: {\n £il(|./src/logo.svg| |^ wi|x 

lineNumber: 1l4\n } ,An __SGIE: 七 RISVR Fr Wn 

‘src/App.js'\n ) \n ' and save to reload.'\n ) \n ) 7 Nan 


}j\n }]);\n\n return App;\n}(_react.Component);\n\nexports.default = 
App? \n\n/ 坟 宙 册 加 去 次 碳 认 大 去 记 出 女 灵 支 克 \m 志 坟 WEBPACK FOOTER\n ** ./src/App.js\n ** module id = 258\n 
zx module chunks = 0\n **/\n//# sourceURL=webpack:///./src/App.js?"); 


rs/ }, 
/* 259 */ 
jj 高 上 坟 识 半山 调 训 庚 识 诡 闪 认识 训 识 商 襄 次 这 调 商 认 这 申 让 
Lv ES vv 
从 交 击 庆 交 汕 油 击 症 光 广 直击 次 克 击 女 击 充 罕 丙 广 二 儿 
/i***/ function(module, exports, _ wespack require ) { 


eval( "module.exports = _ webyack require .p+ 
\"static/media/logo.5d5d9eef .svg\";}\n\Nn/rwW 南 诡 太 大 机 交 妆 妇女 办 去 妆 和 思 \n 交 疡 WEBPACK FOOTER\n ** 
\n w+ module id = 259\n #*# module chunks = 0\n **/\n//# 
sourceURL=webpack: !/ /Wrenlogo vd"); 





rw/ }, 
i* 260 */ 





图 7-3 SVG 在 bundle.js 中 的 表示 
查看 这 个 模块 的 头 部 : 


/* 259 */ 

/ 米 ! 米 米 米 阔 六 六 六 米 米 米 六 六 六 六 六 米 米 米 闵 站 冰冰 1! 米 \ 
I*¥** .VSTC/1ogo.SVg ***! 
\ 玉 六 六 六 六 六 六 六 冰冰 玉米 六 冰冰 站 六 六 六 六 六 阔 / 


注意 它 的 模块 ID 也 是 259， 与 上 面 传递 给 _webpack_require_() 的 数字 相同 。 
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Webpack 将 所 有 东西 都 视 为 一 个 模块 ,包括 logo.svg 这 样 的 图 像 资源 。 可 以 通过 在 混乱 的 
1ogo.svg 模块 中 挑选 出 一 个 路 径 来 了 解 发 生 了 什么 。 路 径 可 能 有 所 不 同 ， 但 是 看 起 来 会 像 这 样 : 


static/media/logo.5d5d9eef.svg 
如 果 你 打开 一 个 新 的 浏览 器 标签 页 并 输入 地 址 : 
http://localhost:3000/static/media/10go.5d5d9eef .svg 


应 该 会 看 到 React 的 logo， 见 图 7-4。 





© © 9 / 国 view-source:localhos! x “图 localhost:3000/static x) 国 localhost:3000/static x\ | Reac | 


€ GC © localhost:3000/static/media/logo.5d5d9eef.svg 六 











7-4 React 的 logo 


因此 可 以 知道 Webpack 是 通过 定义 一 个 函数 来 为 1ogo.svg 创建 了 一 个 Webpack 模块 。 虽然 这 个 
函数 的 实现 细节 是 不 透明 的 ， 但 我 们 知道 它 指 向 Webpack 开发 服务 器 上 SVG 的 路 径 。 因 为 这 种 模块 
化 的 范式 ， 所 以 它 能 够 智能 地 将 语句 : 

import logo from './logo.svg'; 

编译 成 ES5 语句 : 

var _logo = _ webpack_require_ (259); 

_webpack_require_() 是 Webpack 的 特殊 模块 加 载 吉 。 该 调用 引用 的 是 与 10go.svg ( 编号 259 ) 
相对 应 的 Webpack 模块 。 该 模块 返回 一 个 字符 串 路 径 ， 它 表示 logo 在 Webpack 开发 服务 器 上 的 位 置 ， 
即 static/media/logo.5d5d9eef.svg: 








var _logo = _webpack_require_ (259) ; 
console.10g(_10go); 
// -> "static/media/logo.5d5d9eef .svg" 
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我 们 的 CSS 资源 呢 ? 是 的 ， 所 有 东西 都 是 Webpack 中 的 一 个 模块 ，CSS 也 不 例外 。 搜 索 字 符 
串 . /src/App.css， 见 网 7-5。 

















由 / 辆 view-source:localhost:3000 x) 国 localhost:3000/staticjis/bund x React 
CGO localhost:3000/static/is/bundle.js 站 
站 和 .lsrc/A .csg| 人 YIx 
/* 260 */ lsrc/App 
PA dd 
站 广 雪 冯 交 直上 
从 交 庆 庆 交 办 广 击 证 交 守 方 击 康 守 窒 认为 充 守 灾 放 儿 
/***/ function(module, exports, _ webpack require ){ 


eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// 
load the styles\nvar content = _ webpack require (/*! !./../~/react-scripts/~/css- 
loader!./../~/react-scripts/~/postcss-loader!./App.css */ 261);\nif(typeof content === 
'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar 
update = _ webpack require (/*! ./../~/react-scripts/~/style-loader/addstyles.js */ 
263)(content, {});\nif(content.locals) module .exports = content.locals;\n// Hot Module 
Replacement\nif(true) {\n\t// When the styles change, update the <style> 
tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(/*! !./../~/react-scripts/~/css- 
loader!./../~/react-scripts/~/postcss-loader!./App.css */ 261, function() {\n\t\t\tvar 
newContent = _ webpack require (/*! !./../~/react-scripts/~/css-loader!./../~/react- 
scripts/~/postcss-loader!./App.css */ 261);\n\t\t\tif(typeof newContent === 'string') 
newContent = [[module.id, newContent, 
"J]];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove 
the <style> tags\n\tmodule.hot.dispose(function() { update(); 

















7-5 ”搜索 字符 串 ./src/App.css 的 结 








Webpack 的 index.html 中 没有 包含 对 CSS 的 任何 引用 。 这 是 因为 Webpack 通过 bundle. js 包含 
了 CSS。, 当 应 用 程序 加 载 时 ,这 个 神秘 的 Webpack 模块 函数 会 将 App.css 的 内 容 转 储 到 页 面 上 的 style 
标签 中 。 

因此 现在 我 们 知道 发 生 了 什么 : Webpack 将 应 用 程序 中 所 有 可 以 想到 的 “模块 ”都 打包 到 了 
bundle.js 中。 你 可 能 会 问 :“ 为 什么 呢 ? ” 

第 一 个 动机 是 JavaScript 捆绑 器 是 通用 的 。Webpack 已 将 所 有 的 ES6 模块 转换 成 它 自己 定制 的 与 
ES5 兼容 的 模块 语法 。 

此 外 ， 与 其 他 捆绑 器 一 样 ，Webpack 会 将 所 有 JavaScript 模块 合并 到 一 个 文件 中 。 虽 然 可 以 将 
JavaScript 模块 分 别 保存 在 单独 的 文件 中 , 但 是 只 有 一 个 文件 可 以 最 大 化 性 能 。 通过 HTTP 来 传输 每 个 
文件 ,在 传输 开始 和 结束 时 都 会 增加 开销 。 而 将 成 百 上 千 个 较 小 的 文件 打包 成 一 个 较 大 的 文件 可 以 显 
著 提 高 速度 。 

然而 ， 与 其 他 打包 程序 相 比 ，Webpack 将 这 个 模块 范式 做 得 更 好 。 如 我 们 所 见 ， 它 对 图 像 资 源 、 
CSS 和 npm 包 (如 React 和 ReactDOM ) 应 用 了 相同 的 模块 化 处 理 方案 。 这 种 模块 化 范式 释放 了 大 量 
的 能 力 。 在 本 章 的 其 余部 分 ， 我 们 将 讨论 这 种 能 力 的 各 个 方 国 

初步 理解 了 Webpack 工作 原理 后 , 让 我 们 将 注意 力 转 回 到 示例 应 用 程序 上 。 我 们 将 进行 一 些 修改 ， 
并 能 直接 看 到 Webpack 的 开发 过 程 是 如 何 工作 的 。 






































o 





7.5 对 示例 应 用 程序 进行 修改 201 





7.5 “对 示例 应 用 程序 进行 修改 


我 们 已 在 浏览 器 中 查看 了 Webpack 开发 服务 器 生成 的 bundle. js。 回想 一 下 , 要 启动 这 个 服务 器 ， 
需要 运行 以 下 命令 : 

$ npm start 

如 我 们 所 见 ， 这 个 命令 是 在 package .json 中 定义 的 : 

"start": "react-scripts start" 

这 其 中 到 底 发 生 了 什么 呢 ? 

react-scripts 包 定 义 了 一 个 启动 脚本 。 可 以 将 此 启动 脚本 视 为 Webpack 的 特殊 接口 ， 它 包含 了 
Create React App 提供 的 一 些 特性 和 约定 。 概 括 来 说 ， 该 启动 脚本 可 以 : 

e@ 设置 Webpack 的 配置 ; 

@ 为 Webpack 的 控制 台 输出 提供 一 些 良 好 的 格式 化 和 着 色 ; 

e@ 如 果 你 使 用 的 是 OS X， 它 会 启动 一 个 Web 浏览 

下 面 来 看 基于 Webpack 的 React 应 用 程序 的 开发 周期 是 什么 样 的 。 


7.5.1 ” 热 重 载 
如 果 服务 器 尚未 运行 ， 那 么 运行 启动 命令 来 启动 它 


$ npm start 


同样 ， 应 用 程序 仍 在 http://localhost:3800/ 启 动 。Webpack 开发 服务 器 会 监听 这 个 端口 ， 当 
服务 器 发 出 请 求 时 ， 它 将 为 开发 包 提供 服务 。 

Webpack 为 我 们 提供 了 一 项 引 人 注 目的 开发 特性 一 一 热 重 载 。 热 重 载 允许 Web 应 用 程序 中 的 某 些 
文件 在 检测 到 变化 时 能 实时 进行 热 交 换 ， 无 须 重新 加 载 整个 页 面 。 

目前 ，Create React App 只 会 为 CSS 设置 热 重 载 。 这 是 因为 React 特定 的 热 重 载 器 的 默认 设置 不 够 

CSS 的 热 重 载 是 非常 棒 的 。 在 浏览 器 窗口 打开 的 情况 下 对 App.css 进行 编辑 ,可 以 看 到 应 用 程序 
会 自动 更 新 ， 无 须 刷 新 整个 页 面 。 

例如 ， 可 以 更 改 logo 旋转 的 速度 。 下 面 将 其 从 2@s 改 为 1s: 


.App-logo { 
animation: App-logo-spin infinite 1s linear; 
height: 80 px; 

} 


或 者 可 以 改变 标题 文本 的 颜色 。 下 面 把 它 从 white (白色 ) 改 为 purple (紫色 ): 


.App-header { 
background-color : #222; 
height: 150px; 
padding: 20px; 
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color: purple; 


】 


热 重 载 的 工作 原理 

Webpack 在 bundle.js 中 包含 了 客户 端 代 码 以 执行 热 重 载 。Webpack 客户 端 在 服务 器 上 维护 了 
一 个 开放 的 套 接 字 。 每 当 修 改 bundle 文件 时 ， 都 会 通过 此 websocket 通知 客户 端 。 然 后 ， 客 户 端 
会 向 服务 器 发 出 请 求 以 获取 bundle 文件 的 补丁 。 服 务 器 不 会 去 获取 整个 bundle 文件 , 而 只 是 向 客 
户 端 发 送 它 需要 执行 的 用 于 “ 热 交 挽 ”资源 的 代码 。 

Webpack 的 模块 化 范式 使 资源 的 热 重 载 成 为 可 能 。 回想 一 下 ,Webpack 会 将 CSS 插入 style 标 
签 内 的 DOM 中 。 为 了 交换 修改 后 的 CSS 资源 ， 客 户 端 会 删除 之 前 的 style 标签 并 插入 一 个 新 的 。 
浏览 器 会 为 用 户 演 染 修改 后 的 内 容 ， 而 所 有 这 些 都 无 须 重新 加 载 页 面 。 














7.5.2 自动 重 载 
虽然 热 重 载 不 支持 JavaScript 文件 ， 但 Webpack 在 检测 到 变化 时 仍 会 自动 重 载 页 面 。 

在 浏览 器 窗口 仍 打开 的 情况 下 ， 让 我 们 对 sre/App. js 进行 一 个 较 小 的 编辑 。 我 们 将 更 改 p 标签 
中 的 文本 : 


<p className="App-intro"> 
I just made a change to <¢code>src/App.js</code>! 

</p> 

然后 保存 文件 。 你 会 注意 到 保存 后 不 久 页 面 就 会 刷新 ， 且 你 所 做 的 更 改 也 会 得 到 反映 。 

因为 Webpack 本 质 上 是 一 个 JavaScript 开发 和 部 署 的 平台 ， 所 以 它 有 一 个 正在 不 断 发 展 的 生态 系 
统 ， 针 对 Webpack 驱动 的 应 用 程序 的 插件 和 工具 。 

对 于 开发 而 言 ， 热 重 载 和 自动 重 载 是 Create React App 配置 的 两 个 最 引 人 注 日 的 插件 。 稍 后 关于 
eject (“弹出 ”) 的 部 分 中 ， 我 们 将 指向 Create React App 的 配置 文件 ( Webpack 开发 配置 )， 以 便 你 
可 以 看 到 其 余 内 容 。 

为 了 进行 部 署 ，Create React App 已 为 Webpack 配置 了 各 种 插件 ， 这 些 插件 可 以 生成 生产 级 别 的 
优化 构建 。 接 下 来 看 生产 构建 过 程 。 


7.6 创建 生产 构建 


到 目前 为 止 , 我 们 一 直 在 使 用 Webpack 开发 服务 器 。 在 之 前 的 研究 中 ,可 以 看 到 该 服务 器 生成 了 
一 个 修改 后 的 index.html ， 其 中 加 载 了 pundle.js。Webpack 从 内 存 中 生成 并 提供 了 此 文件 , 并 没有 
向 磁盘 写 人 任何 内 容 。 
在 生产 环境 中 ， 我 们 希望 Webpack 将 bundle 文件 写 和 磁盘。 我 们 最 终 将 得 到 一 个 生产 优化 的 
HTML、CSS 和 JavaScript 的 构建 。 然 后 可 以 使 用 自己 喜欢 的 HTTP 服务 器 来 提供 这 些 资源 。 如 果 要 
和 世界 分 享 我 们 的 应 用 程序 ， 只 需 将 这 个 构建 上 传 到 一 个 资源 主机 上 即 可 ， 比 如 Amazon 的 S3。 
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下 面 来 看 生产 构建 是 什么 样子 的 。 

如 果 服 务 器 正在 运行 ， 请 使 用 CtltC 退出 服务 器 。 然 后 在 命令 行 中 运行 之 前 我 们 在 package. json 中 
看 到 的 build 命令 : 

$ npm run build 

完成 此 操作 后 ， 你 会 注意 到 在 项 目的 根 目录 中 创建 了 一 个 新 的 文件 夹 : build。 运 行 cd 命令 进入 
该 目录 并 查看 里 面 的 内 容 : 


$ cd build 
$ 1s 
favicon.ico 
index.html 
static/ 


如 果 你 查看 了 这 个 index.html ， 就 会 注意 到 Webpack 执行 了 一 些 在 开发 环境 中 没有 做 的 附加 处 
理 。 最 值得 注意 的 是 代码 没有 换行 ， 整 个 文件 的 代码 都 在 一 行 上 。HTML 中 不 需要 换行 符 ， 它 们 只 是 
多 余 的 字 节 ， 生 产 中 不 需要 它们 。 

以 下 是 该 文件 以 人 类 可 读 格式 显示 的 样子 : 


《1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta content="width=device-width,initial-scale=1" name="viewport"> 
<link href="/favicon.ico?fd73a6eb" rel="shortcut icon"> 
<title>React App</title> 
<link href="/static/css/main.9a0Qfe4f1 .css" rel="stylesheet"> 
“</head> 
<body> 
<div id="root"></div> 
<script src="/static/js/main.590bf8bb.js" type="text/javascript"> 
《</script> 
</body> 
</html> 


此 index.html 没有 引用 bundle.js， 而 是 引用 了 static/ 目 录 中 的 文件 ， 稍 后 会 介绍 。 更 重要 
的 是 ， 生 产 环境 的 index.html 现在 有 一 个 指向 CSS bundle 文件 的 link 标签 。 如 我 们 所 见 ， 在 开发 
环境 中 ，Webpack 是 通过 bundle. js 来 插入 CSS。 此 特性 是 为 了 支持 热 重 载 。 在 生产 环境 中 ， 热 重 载 
能 力 则 无 关 紧 要 。 因 此 ，Webpack 选择 正常 部 署 CSS 。 


























且 是 经 过 版 本 控制 的 (如 main.<version> .js )。 

资源 的 版 本 控制 在 处 理 生产 环境 中 的 浏览 器 缓存 时 非常 有 用 。 如 果 文 件 被 修改 ， 它 
的 版 本 也 会 跟着 被 修改 。 客 户 端 浏览 器 将 被 连 去 获取 最 新 的 版 本 。 

请 注意 ， 你 的 文件 版 本 (或 摘要 ) 可 能 会 与 上 述 的 不 同 。 


static 文件 夹 的 组 织 结构 : 


多 Webpack 资源 的 版 本 控制 。 可 以 看 到 上 面 的 JavaScriptbundle 文件 具有 不 同 的 名 称 ， 
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$ 1s static 
css/ 

js/ 

media/ 


单独 查看 其 中 的 文件 夹 : 


$ ls static/css 
main.9a0fe4f1 .css 
main.9a0fe4f1.css.map 

















$ ls static/js 
main.f7b2704e.js 
main.f7b2704e.js.map 


$ ls static/media 
1ogo.5d5d9eef.svg 


可 以 在 文本 编辑 器 中 随意 打开 .css 文件 和 .js 文件 。 由 于 它们 太 大 ， 因 此 本 书 不 会 展示 。 
了 打开 这 些 文 件 时 需要 小 心 ， 因 为 它们 的 大 小 可 能 会 导致 编辑 器 前 溃 ! 



































如 果 你 打开 CSS 文件 , 就 会 看 到 里 面 只 有 两 行 : 第 一 行 是 应 用 程序 中 所 有 的 CSS, 并 去 掉 了 所 有 
多 余 的 空格 。 应 用 程序 中 可 能 有 数 百 个 不 同 的 CSS 文件 , 但 它们 会 在 这 一 行 结束 。 第 二 行 是 一 个 特殊 
的 注释 ， 声 明了 映射 文件 的 位 置 。 
JavaScript 文件 甚至 更 紧凑 。 在 开发 环境 中 , bundle. js 有 一 定 的 结构 。 可 以 挑选 出 各 个 模块 所 在 
的 位 置 ， 而 生产 版 本 没有 这 种 结构 。 更 重要 的 是 ， 代 码 已 被 压缩 和 了 丑化。 如果 你 不 熟悉 压缩 或 丑化 ， 
请 看 下 面 的 附加 栏 “压缩 、 丑 化 和 源 映 射 ”。 
最 后 ，media 文件 夹 将 包含 应 用 程序 的 所 有 其 他 静态 文件 ， 如 图 像 和 视频 。 这 个 应 用 程序 只 有 一 
个 图 像 ， 即 React logo SVG 文件 。 
同样 ， 这 个 捆绑 包 是 完全 独立 的 ， 可 以 使 用 。 如 果 我 们 愿意 ， 可 以 安装 一 个 和 第 一 个 应 用 程序 相 
的 http-server 包 ， 并 使 用 它 来 为 这 个 文件 夹 提供 服务 ， 如 下 所 示 : 
http-server ./build -p 3000 
如 果 没 有 Webpack 开发 服务 器 ， 可 以 想象 开发 周期 会 有 点 痛 否 : 
(1) 修改 应 用 程序 ; 
(2) 运行 npm run build 来 生成 Webpack 拥 绑 包 ; 
(3) 启动 或 重启 HTTP 服务 器 。 
这 就 是 为 什么 除了 用 于 生产 的 捆绑 包 之 外 ， 没 有 其 他 办 法 可 以 “构建 ”一 些 其 他 东西 。Webpack 
服务 器 只 服务 于 开发 需求 。 
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压缩 、 丑 化 和 源 映射 

对 于 生产 环境 ， 可 以 通过 将 JavaScript 文件 从 人 类 可 读 的 格式 转换 为 行为 完全 相同 的 更 紧凑 的 
格式 来 显著 减 小 JavaScript 文件 的 大 小 。 基 本 的 策略 是 去 掉 所 有 多 余 的 字符 ， 比 如 空格 。 这 个 过 程 
称 为 压缩 。 

丑化 〈 或 混淆 ) 是 指 故意 修 改 JavaScript 文件 ， 使 其 更 难 被 人 阅读 的 过 程 。 同 样 ， 应 用 程序 的 
实际 行为 并 没有 改变 。 理 想 情 况 下 ， 这 个 处 理会 降低 外 部 开发 人 员 理解 代 码 的 能 力 。 

.css 和 .js 文件 都 附带 一 个 以 .map 结尾 的 文件 。.map 文件 是 一 个 源 映 射 ， 它 为 生产 构建 提供 
调试 帮助 。 因 为 它们 被 压缩 和 丑化 了 ， 所 以 生产 应 用 程序 中 的 CSS 和 JavaScript 很 难 调试 。 举 个 例 
子 ， 如 果 你 在 生产 环境 中 遇 到 JavaScript 的 bug， 浏览 器 就 会 将 你 引 向 这 段 神秘 的 混淆 代码 行 。 

通过 源 映 射 ， 可 以 将 这 个 代码 库 的 令 人 困惑 的 区 域 映 射 回 其 原始 的 、 未 构建 的 形式 。 有 关 源 映 
射 及 如 何 使 用 它们 的 更 多 信息 ,请 参考 Ryan Seddon 的 博文 “Introduction to JavaScript Source Maps”。 


7.7 弹出 


在 本 章 开 头 第 一 次 引入 Create React App 时 ， 我 们 注意 到 该 项 目 提供 了 一 个 “弹出 ”应 用 程序 的 
机 制 。 
这 是 令 人 欣慰 的 。 你 可 能 会 发 现 自 己 在 未 来 的 某 个 位 置 会 想 要 进一步 控制 React-Webpack 的 设置 。 
弹出 程序 会 复制 在 项 目 目录 中 react-scripts 封装 的 所 有 脚本 和 配置 。 它 打开 了 “ 黑 盒 ”"， 把 应 用 程 
序 控制 权 完全 交还 给 你 。 
执行 弹出 程序 也 是 一 个 很 好 的 方法 ， 可 以 从 Create React App 中 剥 去 一 些 “ 魔 法 ”。 我 们 将 在 这 一 
节 执 行 一 个 弹出 程序 ， 下 面 来 快速 看 一 下 。 
弹出 程序 一 旦 执行 是 不 能 回 退 的 ， 因 此 使 用 此 命令 时 需要 小 心 。 如 果 你 决定 要 在 将 
来 执行 弹出 程序 ， 请 确保 应 用 程序 已 检 入 源 代 码 管 理 中 。 


如 果 你 正在 将 应 用 程序 添加 到 heart-webpack 中 ,可 以 考虑 在 进行 之 前 复制 该 目录 。 
例如 ， 你 可 以 这 样 做 : 





























cp -r heart-webpack heart-webpack-ejected 
像 这 样 批量 移动 node_modules 文件 夹 时 ， 它 的 表现 不 是 很 好 ， 因 此 你 需要 删除 
node_modules 并 重新 安装 : 


cd heart-webpack-ejected 
rm -rf node_modules 
npm i 


然后 , 你 可 以 在 heart-webpack-ejected 中 执行 本 节 中 的 步骤 并 将 heart-webpack 
保护 起 来 。 
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开始 行动 


在 heart-webpack 的 根 目录 运行 弹出 命令 : 


$ npm run eject 
确认 你 想 要 弹出 ， 输 入 y， 然 后 按 回 车 键 。 


等 所 有 的 文件 从 react-scripts 复制 到 目录 后 ，npm install 将 运行 。 我 们 将 看 到 这 是 因为 所 有 
的 react-scripts 依赖 项 都 被 转 储 到 package. json 中 。 


当 npm install 完成 后 ， 我 们 来 看 项 目 目录 : 


$ 1s 

README .md 
build/ 
config/ 
node_modules/ 
package. json 
public/ 
scripts/ 

src/ 






































我 们 有 了 两 个 新 文件 夹 : config 和 scripts。 如 果 查 看 src/ 内 部 ， 你 就 会 注意 到 它 正如 预期 的 
那样 并 没有 改变 。 
看 package. json ， 其 中 有 大 量 的 依赖 项 。 有 些 依 赖 项 是 必要 的 ， 比 如 Babel 和 React; 其 他 的 依 
赖 项 ， 比 如 eslint 和 whatwg-fetch， 则 是 “可 有 可 无 的 ”( 有 更 好 ) 的 。 这 反映 了 Create React App 
项 目的 精神 : 一 个 为 React 开发 人 员 准 备 的 入 门 套件 。 
下 一 步 查 看 script/ 目 录 : 


$ ls scripts 
build.js 
start.js 
test.js 
































之 前 ， 当 我 们 运行 npm start 和 npm run build 时 ， 其 实 是 分 别 在 执行 start. js 和 build. js。 
本 书 没有 这 些 文件 , 但 可 以 去 其 他 地 方 阅读 它们 。 虽 然 这 些 文件 很 复杂 , 但 有 良好 的 注释 。 通 过 简单 
地 阅读 注释 就 可 以 很 好 地 了 解 每 个 脚本 的 功能 (以 及 它们 “免费 ”提供 了 什么 )。 

最 后 ， 查 看 config/ 目 录 : 


$ ls config 

env .js 

jest/ 

paths .js 

polyfills.js 

webpack .config.dev.js 
webpack .config.prod.js 




















react-scripts 为 它 提供 的 工具 提供 了 合理 的 默认 设置 。 在 package .json 中 ， 它 指定 了 Babel 
的 配置 。 这 里 ， 它 指定 了 Webpack 和 Jest (下 一 章 中 使 用 的 测试 库 ) 的 配置 。 
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特别 值得 注意 的 是 Webpack 的 配置 文件 。 这 里 就 不 深入 讨论 了 ,但 是 这 些 文件 都 有 良好 的 注释 。 
通过 阅读 这 些 注释 ,你 可 以 很 好 地 了 解 Webpack 开发 和 生产 管道 的 情况 ， 以 及 使 用 了 哪些 插件 。 如 果 
将 来 你 对 react-scripts 在 开发 或 生产 中 如 何 配 置 Webpack 感到 好 奇 ， 可 以 参考 这 些 文件 中 的 注释 。 

希望 看 到 react-scripts 的 “内 在 ”能 减少 一 点 它 的 神秘 感 。 正 如 我 们 在 这 里 所 做 的 , 测试 eject 
可 以 让 你 了 解 到 ， 在 将 来 需要 时 放弃 react-scripts 的 过 程 是 什么 样 的 。 

到 目前 为 止 ， 本 章 已 介绍 了 Webpack 的 基础 知识 ， 并 创建 了 Create React App 的 界面 。 有 具体 如 下 
所 示 : 


@ Create React App 的 界面 是 如 何 工 作 的 ; 
e@ 基于 Webpack 的 React 应 用 程序 的 总 体 布局 ; 

e@ Webpack 是 如 何 工作 的 ( 以 及 它 提 供 的 一 些 能 力 ); 

@ Create React App 和 Webpack 如 何 帮助 我 们 生成 生产 优化 的 构建 ; 
e@ 弹出 的 Create React App 项 目 是 什么 样子 的 。 

但 是 ， Webpack-React 演示 应 用 程序 缺少 了 一 个 基本 元 素 。 


第 二 个 项 目 (计时 器 应 用 程序 ) 中 有 一 个 与 API 交互 的 React 应 用 程序 。Node 服务 器 提供 了 静态 
资源 (HTML/CSS/NS ) 以 及 一 组 API 端点 ， 我 们 可 以 使 用 它们 来 持久 化 关于 运行 中 的 计时 器 数据 。 
如 本 章 所 述 ， 当 通过 Create React App 使 用 Webpack 时 ， 我 们 会 启动 一 个 Webpack 开发 服务 器 。 
该 服务 器 负责 为 静态 资源 提供 服务 。 
如 果 想 让 React 应 用 程序 与 API 交互 该 怎么 办 ? 我 们 仍 希望 Webpack 开发 服务 器 为 静态 资源 提供 
服务 。 因 此 ,可 以 假定 需要 分 别 启动 API 服务 器 和 Webpack 服务 器 ， 而 我 们 面临 的 挑战 是 让 这 两 者 
合作 oO 
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7.8 ”Create React App 和 API 服务 器 一 起 使 用 


本 节 将 研究 一 种 与 API 服务 器 一 起 运行 Webpack 开发 服务 器 的 策略 。 在 深入 研究 这 个 策略 之 前 ， 
掉 先 来 看 即将 要 使 用 的 应 用 程序 。 


7.8.1 完整 的 应 用 程序 


food-lookup-complete 位 于 本 书 代码 的 根 目录 。 可 以 从 heart-webpack 到 达 该 目录 : 


$ cd ../.. 
$ cd food-lookup-complete 


看 该 文件 夹 的 结构 : 


$ 1s 

README .md 
client/ 

db/ 
node_modules/ 
package. json 




















下 
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SerVver .js 
start-client.js 
start-server .js 


服务 器 所 在 的 位 置 是 在 该 项 目的 根 目录 中 。 这 里 有 一 个 package .json 和 一 个 server .js 文件 。 
React 应 用 程序 所 在 的 位 置 在 client 文件 夹 中 ， 而 client 文件 夹 是 用 Create React App 生成 的 。 


下 面 看 一 下 client 文件 夹 内 部 。 
如 果 你 使 用 的 是 macOS 或 Linux 系统 ， 则 运行 : 


$ ls -a client 






































Windows 用 户 可 以 运行 : 
$ ls client 
你 会 看 到 如 下 结构 : 
.babelrc 
.gitignore 


node_modules/ 
package. json 
public/ 

src/ 

tests/ 


在 OSX 和 UNIX 系统 中 ,1s 命令 的 -a 标志 表示 显示 所 有 文件 , 包括 前 面 有 一 个 “.” 
的 “隐藏 ”文件 (比如 .babelrc )。Windows 会 默认 显示 隐藏 文件 。 


因此 我 们 有 两 个 package .json 文件 。 一 个 位 于 根 目录 中 ， 用 于 指定 服务 器 所 需要 的 包 ; 男 一 个 
位 于 client/ 目 录 中 ， 用 于 指定 React 应 用 程序 所 需要 的 包 。 我 们 有 两 个 完全 独立 的 应 用 程序 ， 虽然 
它们 并 存 于 这 个 文件 夹 中 。 


.babelrc 


.babelrc 是 cilent/ 目 录 中 的 一 个 值得 注意 的 文件 。 该 文件 内 容 如 下 所 示 : 


// client/.babelrc 
{ 
"plugins": ["transform-class-properties"] 


} 
你 可 能 还 记得 , 这 个 插件 为 我 们 提供 了 属性 初始 化 语法 , 且 第 一 章 末 尾 使 用 了 它 。 在 那个 项 目 中 ， 
我 们 通过 在 app. js 的 script 标签 上 设置 data-plugins 属性 来 指定 想 要 使 用 的 这 个 插件 ,如 下 所 示 : 


《<script 
type="text/babel" 
data-plugins="transform-class-properties" 
src="./js/app.js" 

></script> 


而 在 现在 这 个 项 目 中 ，Babel 已 被 包含 进来 并 由 react-scripts 管理 。 为 了 指定 我 们 希望 Babel 
用 于 Create React App 项 目的 插件 ， 首 先 必须 在 package. json 中 包含 这 些 插 件 。package .json 中 已 
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包含 了 如 下 脚本 : 


food-lookup-complete/client/package.json 





"dependencies": { 





接 下 来 只 需 在 .babelrc 中 指定 我 们 希望 Babel 使 用 的 这 个 插件 即 可 。 
1. 运行 应 用 程序 
为 了 启动 应 用 程序 ， 需 要 同时 为 服务 器 和 客户 端 安 装 包 。 我 们 会 分 别 在 两 个 目录 中 运行 npm i 


命令 : 
$ npm i 
$ cd client 
$ npm i 
$cd.. 


安装 了 服务 器 和 客户 端的 包 后 ， 就 可 以 运行 应 用 程序 了 。 确 保 从 项 目的 顶级 目录 ( 服务 器 所 在 的 
目录 ) 执行 此 操作 : 

$ npm start 

在 启动 过 程 中 ,我们 会 看 到 来 自 服务 器 和 客户 端的 一 些 控制 台 输 出 。 一 旦 应 用 程序 启动 后 ,我们 
就 可 以 访问 localhost:3680 来 查看 ( 见 图 7-6 )。 














四 利生 /图 ReactApp = 3 
和 CG © localhost:3000 音 
Selected foods 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Total 0.00 0.00 0.00 0.00 
Q 
Description Kcal Protein(g) Fat(g) Carbs(g) 





图 7-6 来 自 服务 器 和 客户 端的 控制 台 输出 


该 应 用 程序 提供 了 一 个 在 食品 数据 库 中 查找 营养 信息 的 搜索 字段 。 在 搜索 字段 中 输入 一 个 值 就 可 
以 执行 实时 搜索 。 可 以 点 击 食物 项 ， 并 将 它们 添加 到 总 计 表 的 顶部 ( 见 图 7-7 )。 
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©09 /图 ReactApp x NE | React 
| LD CG © localhost:3000 内 
Selected foods 
Protein Fat 

Description Kcal Carbs 

加 @ 号 
Pork, cured, bacon, unprep 417 12.62 37.19 1.28 
Lettuce, grn leaf, raw 15 1.36 0.11 2.87 
Tomatoes, red, ripe, ckd 18 0.95 0.07 4.01 
Total 450.00 13.00 37.00 7.00 

Search foods. Q 

Description Kcal Protein(g) Fat(g) Carbs(g) 





一 
图 7-7 食物 项 被 添加 到 了 总 计 表 的 项 部 


2. 应 用 程序 的 组 件 
此 应 用 程序 由 三 个 组 件 组 成 ( 见 图 7-8 )。 


ua! 





SelectedFoods 


Selected foods 


Protein 


Description Kcal 

多 @ 
Pork, cured, bacon, unprep 417 
Lettuce, grn leaf, raw 和 


Tomatoes, red, ripe, ckd 18 


Total 


FoodSearch 


mustard| 


Description Protein (gj) Fatlg) Carbs(g) 


Mustard, prepared, yellow 3.74 3.16 5.83 


Salad drsng, honey mustard, reg 0.87 39.30 23.33 


Dressing, honey mustard, fat-free 1.07 1.35 38.43 





图 7-8 应 用 程序 的 三 个 组 件 
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e@ App 组 件 : 应 用 程序 的 父 容器 。 
@ SelectedFoods 组 件 : 列 出 所 选 食物 的 表格 。 点 击 其 中 一 个 食物 项 即 可 将 其 从 表格 中 移 除 。 
@ FoodSearch 组 件 : 提供 实时 搜索 字段 的 表格 。 点 击 表格 中 的 食物 项 会 将 其 添加 到 总 计 表 中 
(SelectedFoods 组 件 )。 
本 章 不 会 深入 讨论 这 些 组 件 的 细节 ， 相 反 ， 只 关注 如 何 让 这 个 现 有 的 Webpack-React 应 用 程序 与 
Node 服务 顺 一 起 协作 。 


7.8.2 应 用 程序 的 组 织 方式 
现在 我 们 已 了 解 了 完整 的 应 用 程序 ， 下 面 来 看 要 如 何 让 它 工作 。 


如 果 应 用 程序 正在 运行 , 则 关闭 它 , 然后 切换 到 webpack 中 的 food-lookup 目录 (未 完成 版 相 。 
从 food-lookup-complete 到 达 该 目录 


















































cd webpack/food-lookup 
同样 ， 必 须 为 服务 器 和 客户 端 安装 npm 包 : 


$ npm i 
$ cd client 
$ npm i 
$cd.. 


7.8.3 ”服务 器 


下 面 先 启动 服务 器 ， 并 研究 它 是 如 何 工 作 的 。 在 完整 的 应 用 程序 版 本 中 ， 我 们 使 用 npm start 启 
动 了 服务 器 和 客户 端 。 如 果 检 查 当前 这 个 目录 中 的 package.json ， 我 们 就 会 看 到 这 个 命令 尚未 被 定 
义 。 我 们 只 能 这 样 启动 服务 器 : 

$ npm run server 

此 服务 器 提供 了 一 个 API 端 点 ， 即 /api/food。 它 接收 一 个 参数 q， 即 我 们 正在 搜索 的 食物 。 

你 可 以 自己 试 一 试 , 使 用 浏览 器 执行 搜索 或 者 使 用 curl: 


$ curl localhost:3001/api/food?q=hash+browns 












































[ 


"description": "Fast foods, potatoes, hash browns, rnd pieces or patty", 
"kcal": 272, 

"protein_g": 2.58, 

"carbohydrate_g": 28.88, 

"sugar_g": 0.56 


"description": "Chick-fil-a, hash browns", 
"kcal": 301, 

"protein_g": 3, 

"carbohydrate_g": 30.51, 

"sugar_g": 0.54 
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"description": "Denny's, hash browns", 
"kcal": 197, 

"protein_g": 2.49, 

"carbohydrate_g": 26.59, 

"sugar_g": 1.38 


"description": "Restaurant, family style, hash browns", 
"kcal": 197, 
"protein_g": 2.49, 
"carbohydrate_g": 26.59, 
"sugar_g": 1.38 
} 
] 


现在 我 们 已 了 解 了 这 个 端点 是 如 何 工作 的 ， 下 面 来 看 它 在 客户 端 中 被 调用 的 一 个 区 域 。 用 CtrlrC 
关闭 服务 天 进程 。 




















7.8.4 Client 
FoodSearch 组 件 调 用 了 /apiy/foods 端点 。 每 当 用户 更 改 搜索 字段 时 ， 它 都 会 执行 一 个 请 求 ， 并 
使 用 了 client 库 来 发 出 请 求 。 


Client 模块 在 client/src/Client.js 中 定义 。 它 使 用 search( ) 方 法 导出 一 个 对 象 。 下 面 来 看 
search( ) 函数 : 


























webpack/food-lookup/client/src/Client.js 





function search(query, cb) { 
return fetch(“http://localhost:3001/api/food?q=${query}., { 
accept: 'application/json', 
}).then(checkStatus) 
.then(parseJSON) 
.七 hen(cb ) ; 
} 








search( ) 函数 是 客户 端 和 服务 絮 之 间 的 一 个 接触 点 。search( ) 函数 调用 了 localhost: 3001， 这 
是 服务 器 的 默认 位 置 。 
因此 需要 两 个 不 同 的 服务 器 来 运行 此 应 用 程序 。 我 们 需要 运行 API 服务 器 ( 位 置 在 localhost:3881 ) 
以 及 运行 Webpack 开发 服务 器 (位 置 在 1ocalhost :3688 )。 如 果 两 台 服 务 器 都 在 运行 , 那么 它们 应 该 
就 可 以 通信 了 。 

可 以 使 用 两 个 终端 窗口 ， 但 这 里 有 更 好 的 解决 方案 。 




















@ 如 果 需 要 回顾 一 下 Fetch API， 可 以 参考 第 3 章 。 


7.8.5 concurrently 
concurrently 是 一 个 用 于 运行 多 个 进程 的 实用 程序 。 下 面 通过 实现 它 来 看 它 是 如 何 工 作 的 。 
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concurrently 已 包含 在 服务 器 的 package .json 中 : 
webpack/food-lookup/package.json 
} 


"devDependencies": { 
"concurrently": "3.1.0" 








我 们 希望 concurrently 执行 两 个 命令 ， 一 个 用 于 启动 API 服务 器 ， 另 一 个 用 于 启动 Webpack 开发 
服务 器 。 可 以 通过 将 多 个 命令 放 在 引号 中 传递 给 concurrently 来 启动 它们 ， 如 下 所 示 : 


# 使 用 concurrently 的 例子 
$ concurrently "command1" "command2" 


如 果 编 写 的 应 用 程序 只 在 Mac 或 UNIX 机 器 上 工作 ， 则 我 们 可 以 这 样 做 : 

$ concurrently "npm run server" "cd client && npm start" 

注意 ， 第 二 个 命令 用 于 引导 客户 端 将 目录 更 改 到 client 中 ， 然 后 运行 npm start。 

然而 ，&& 操 作 符 不 是 跨 平台 的 ， 不 能 在 Windows 上 工作 。 因 此 ,我们 在 项 目 中 包含 了 一 个 
start-client.js 脚本 。 此 脚本 将 从 顶级 目录 启动 客户 端 。 

有 了 这 个 启动 脚本 ， 就 可 以 像 下 面 这 样 从 顶级 目录 启动 客户 端 应 用 程序 : 

$ babel-node start-client.js 

下 面 在 package. json 中 添加 一 个 client 命令 。 这 样 ， 启 动 服务 器 和 客户 端的 方法 看 起 来 会 相同 : 


# 启动 服务 器 
$ npm run server 
# 启动 客户 阅 
$ npm run client 


因此 ， 使 用 concurrently 将 如 下 所 示 : 


$ concurrently "npm run server" "npm run client" 












































下 面 将 start 和 client 命令 添加 到 package .json 中 : 


food-lookup-complete/package.json 





"scripts": { 


"start": "concurrently \"'npm run server\" \"'npm run client\"", 
"server": "babel-node start-server.js", 
"client": "babel-node start-client.js" 


}, 























对 于 start 脚本 , 我 们 执行 了 两 个 命令 , 因为 是 在 一 个 JSON 文件 中 , 所 以 需要 对 引号 进行 转 义 。 

保存 并 关闭 package. json。 下 面 就 可 以 通过 运行 npm start 来 启动 这 两 个 服务 器 了 : 

$ npm start 

我 们 将 看 到 记录 到 控制 台 的 服务 器 和 客户 端的 输出 ， 因 为 concurrently 同时 执行 了 两 个 运行 命令 。 

当 一 切 都 启动 后 ， 就 可 以 访问 localhost:3668 了 。 接 着 可 以 开始 输入 一 些 东西 ,但 奇怪 的 是 ， 
似乎 什么 事 也 没有 发 生 ( 见 图 7-9 )。 
































214 第 7 章 Webpack 与 Create React App 结合 使 用 








©90 /ReactApp x (Ea React 
CG © localhost:3000 六 | 时 
| 
Selected foods 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Total 0.00 0.00 0.00 0.00 
| chicken Qx 
Description Kcal Protein(g) Fatlg) Carbs(g) 

















mt 





图 7-9 输入 “chicken” 但 似乎 什么 事 也 没有 发 4 








打开 开发 者 控制 台 ， 可 以 看 到 到 处 都 是 错误 ( 见 图 7-10 )。 














©®9g /图 ReactApp x AR | React 
CG © localhost3000 站 | 下 
| 
| 
Selected foods 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Total 0.00 0.00 0.00 000 
民 面 Elements Console ”Sources Network Timeline Profiles ” Application Security Audits @20 : x 


© YF mp v OPpresevelog 

了 for CORS request. 

© Uncaught (in promise) TypeError: Failed to fetch(-) Client, 1s:14 

© » Fetch API cannot load localhost:3001/api/food?q=chi. URL scheme must be “http" or “https” Client.is:14 
for CORS request. 

© Uncaught (in promise) TypeError: Failed to fetch(-) Client, is:14 

© » Fetch API cannot load locathost:3901/api/food?q=chic. URL scheme must be "http” or "https” Client,is:14 
for CORS request, 

© Uncaught (in promise) TypeError: Failed to fetch(-) Client.1s:14 

© » Fetch API cannot load locathost:3901/api/food?q=chick. URL schene must be "http" or "https” Client.is:14 
for CORS request. 








© Uncaught (in promise) TypeError: Failed to fetch(-) Client. is:14 

© *Fetch API cannot load localhost:3001/api/food?q=chicke. URL scheme must be "http" or Client.1s:14 
"https" for CORS request. 

© Uncaught (in promise) TypeError: Failed to fetch(-) lient. 1s:14 

© Fetch API cannot load locathost:3001/api/food?q=chicken. URL scheme must be "http" or Clhient.is:14 
"https” for CORS request. | 

© Uncaught (in promise) TypeError: Failed to fetch(-) Client. 1s:14 





7-10 开发 者 控制 台中 的 错误 
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从 错误 中 挑选 出 其 一 


Fetch API cannot load http://localhost:3001/api/food?gdq=c. No 'Access-Control-A11ow-ON 

rigin' header is present on the requested resource. Origin 'http://localhost:3000' i\ 

s therefore not allowed access. If an opaque response serves your needs, set the req\ 

uest's mode to 'no-cors' to fetch the resource with CORS disabled. 

浏览 器 阻止 了 React 应 用 程序 ( 托管 在 1ocalhost :3066 ) 从 不 同 的 来 源 (1ocalhost:3681 ) 去 
加 载 资源 。 我 们 尝试 执行 跨 域 资源 共享 ( Cross-Origin Resource Sharing，CORS )。 但 出 于 安全 考虑 ， 
浏览 器 会 阻止 来 自 脚 本 的 此 类 请 求 。 


注意 : 如 果 你 没有 遇 到 此 问题 ， 可 能 需要 验证 一 下 你 的 浏览 器 安全 设置 是 否 健全 。 
A 不 限制 CORS 会 使 你 面临 重大 的 安全 风险 。 











这 是 双 服 务 器 解决 方案 的 主要 难点 。 但 双 服务 器 设置 在 开发 中 很 常见 ， 因 此 Create React App 提 
供 了 一 个 现成 的 通用 解决 方案 供 我 们 使 用 。 


7.8.6 使 用 Webpack 开 发 代理 


Create React App 允许 设置 Webpack 开 发 服务 器 来 代理 API 请 求 。React 应 用 程序 可 以 向 1ocalhost : 
30696 发 出 请 求 ， 而 不 需要 向 1ocalhost :3661 的 API 服务 器 发 出 请 求 。 然 后 , 可 以 让 Webpack 将 这 些 
请 求 代 理 到 API 服务 器 。 


我 们 最 初 的 方法 是 让 用 户 的 浏览 器 直接 与 两 个 服务 器 交互 ， 见 图 7-11。 














Webpack 
开发 服务 器 


localhost:3000 


API 服 务 器 


ee DR 














图 7-11 浏览 器 直接 与 两 个 服务 器 交互 


然而 ， 我 们 现在 希望 浏览 器 只 与 1ocalhost :3806 上 的 Webpack 开发 服务 器 进行 交互 。Webpack 
会 转发 API 的 请 求 ， 见 图 7-12。 





十 一 > 
Webpack 
开发 服务 器 API 服 务 器 





To oo localhost:3001 


7-12 ”Webpack 转发 API 的 请 求 
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这 个 代理 特性 允许 React 应 用 程序 与 Webpack 开发 服务 需 进 行 单独 的 交互 ， 并 消除 了 与 CORS 相 
关 的 问题 。 
为 此 ， 首 先 需 要 修改 client/src/Client.js， 然 后 删除 基础 URL ( localhost :3061 ): 


food-lookup-complete/client/src/Client.js 














function search(query, cb) { 
return fetch(“/api/food?q=${query}., { 
accept: 'application/json', 
}).then(checkStatus) 





现在 search( ) 国 数 就 会 调用 localhost:3000 了 。 
接 下 来 ， 在 客户 端的 package. json 中 可 以 设置 一 个 特殊 的 proxy 属性 。 下 面 就 将 此 属性 添加 到 


client/package. json 中 : 


























// 在 client/package.json 中 
"proxy": "http://localhost:3001/", 


A 确保 将 这 一 行 添加 到 客户 端的 package. json 中 ,而 不 是 服务 器 的 package. json 中 。 


此 属性 是 Create React App 特有 的 ， 并 能 指示 Create React App 设置 Webpack 开发 服务 器 将 API 
请 求 代理 到 localhost :38861。Webpack 开发 服务 器 会 推断 代理 的 流量 。 如 果 URL 无 法 识别 ,或 者 请 
求 没有 加 载 静 态 资 源 ( 如 HTML、CSS 或 JavaScript )， 那 么 它 会 将 请 求 代理 到 API 服务 器 。 

试 试看 

使 用 concurrently 启动 两 个 进程 : 

$ npm start 

接着 访问 localhost:3600， 可 以 看 到 一 切 都 正常 。 因 为 浏览 器 是 通过 localhost:3869 与 API 
相连 接 ， 所 以 没有 CORS 的 问题 。 


























7.9 Webpack 总 结 


作为 JavaScript 应 用 程序 的 平台 ，Webpack 包含 许多 特性 ,本 章 介 绍 了 其 中 的 一 些 特性 。Webpack 
的 能 力 大 致 可 以 分 为 两 类 。 

优化 
用 于 生产 环境 的 Webpack 优化 工具 集 非常 庞大 。 

Webpack 提供 的 一 个 即时 优化 是 减少 客户 端 浏览 器 必须 获取 的 文件 数量 。 对 于 由 许多 不 同文 件 组 
成 的 大 型 JavaScript 应 用 程序 ， 提 供 少 量 bundle 文件 (如 bundle. js ) 比 提供 大 量 小 文件 快 得 多 。 

代码 分 割 是 男 一 个 基于 bundle 概念 的 优化 。 可 以 配置 Webpack, 使 其 只 提供 与 用 户 正在 查看 的 页 
面相 关 的 JavaScript 和 CSS 资源 。 虽 然 多 页 面 应 用 程序 可 能 有 成 百 上 千 个 React 组件， 但 我 们 可 以 让 
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[e] 





Webpack 只 提供 必要 的 组 件 和 CSS， 以 便 客户 端 来 泻 染 它们 所 在 的 任何 页 首 
工具 
与 优化 一 样 ， 围 绕 Webpack 工具 的 生态 系统 非常 庞大 。 
对 于 开发 环境 ， 我 们 看 到 了 Webpack 实用 的 热 重 载 和 自动 重 载 特性 。 此 外 ，Create React App 还 
配置 了 开发 流程 中 的 其 他 细节 ， 比 如 自动 分 析 JavaScript 代码 。 
对 于 生产 环境 ， 我 们 了 解 了 如 何 配置 Webpack 来 执行 优化 生产 构建 的 插件 。 


何 时 使 用 Webpack 和 Create React App 


鉴于 Webpack 的 强大 功能 , 你 可 能 会 问 :“ 是 否 应 该 将 Webpack 和 Create React App 用 于 未 来 所 有 
的 React 项 目 中 ? ” 

答案 是 视 情 况 而 定 。 

像 我 们 在 前 两 章 中 所 做 的 那样 ， 在 script 标签 中 加 载 React 和 Babel 仍 是 一 种 完全 合理 的 方法 。 
对 于 某 些 项 目 ， 简 单 的 设置 可 能 更 好 。 另 外 ， 可 以 从 简单 的 开始 ， 然 后 在 将 来 把 项 目 迁 移 到 更 复杂 的 
Webpack 设置 中 。 

此 外 ， 如 果 你 希望 在 现 有 的 应 用 程序 中 使 用 React， 这 种 简单 的 方法 是 最 佳 选 择 。 不 必 为 应 用 程 
序 采用 全 新 的 构建 或 部 署 流程 。 相 反 ， 可 以 逐个 推出 React 组 件 ， 只 需 确 保 React 库 包 含 在 应 用 程序 
中 即 可 。 

但 是 ， 对 于 许多 开发 人 员 和 许多 类 型 的 项 目 来 说 ，Webpack 是 一 个 非常 有 吸引 力 的 选择 ， 它 的 特 
性 非常 好 , 不 容错 过 。 如果 你 打算 编写 一 个 包含 许多 不 同 组 件 的 大 型 React 应 用 程序 , Webpack 对 ES6 
模块 的 支持 将 有 助 于 保持 代码 库 的 合理 性 ， 且 它 也 非常 支持 npm 包 。 多 亏 了 Create React App， 你 还 
可 以 免费 获得 大 量 的 开发 和 生产 工具 。 

另外 还 有 一 个 有 利于 Webpack 的 因素 : 测试 。 下 一 章 将 介绍 如 何 为 React 应 用 程序 编写 测试 。 我 
们 将 看 到 ，Webpack 提供 了 一 个 平台 ， 可 以 在 浏览 器 之 外 的 控制 台中 轻松 执行 测试 套件 。 
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稳健 的 测试 套件 是 高 质量 软件 的 重要 组 成 部 分 。 拥 有 一 套 良好 的 测试 套件 ， 开 发 人 员 可 以 更 加 自 
信 地 重 构 或 添加 功能 到 应 用 程序 中 。 测试 套件 是 一 项 前 期 投资 , 它 在 系统 的 整个 生命 周期 中 都 会 带 来 
收益 。 

众所周知 ， 测 试 UI 非常 难 。 幸 运 的 是 ,测试 React 组 件 并 不 难 。 只 要 使 用 正确 的 工具 和 方法 ， 
Web 应 用 程序 的 界面 可 以 像 系统 中 的 其 他 部 分 一 样 通过 测试 得 到 强化 。 

我 们 将 在 不 使 用 任何 测试 库 的 情况 下 编写 一 个 小 型 测试 套件 。 在 了 解 了 测试 套件 的 本 质 后 ， 我 们 
将 引入 Jest 测试 框架 来 减少 大 量 的 样板 文件 ， 并 能 很 容易 地 让 测试 变 得 更 具有 表现 力 。 

在 使 用 Jest 时 ， 我们 将 看 到 如 何以 行为 驱动 的 方式 组 织 测试 套件 。 一 旦 熟悉 了 这 些 基础 知识 ,我 
们 将 学 习 如 何 测试 React 组 件 。 我 们 将 引入 Enzyme, 它 是 一 个 用 于 在 测试 环境 中 使 用 React 组 件 的 库 。 

最 后 ， 本 章 的 最 后 一 节 将 使 用 更 复杂 的 React 组 件 ， 它 位 于 更 大 的 应 用 程序 中 。 我 们 使 用 模拟 的 
概念 来 隔离 正在 测试 的 API 驱动 的 组 件 。 


8.1 不 使 用 框架 编写 测试 


如 果 你 已 熟悉 JavaScript 测试 ， 可 以 跳 到 下 一 节 。 
0 但 你 可 能 仍 会 发 现 这 一 节 对 理解 测试 框架 在 幕后 做 的 工作 很 有 帮助 。 
本 章 的 项 目 位 于 本 书 代码 的 testing 文件 夹 中 。 
我 们 将 从 basics 文件 夹 开始 : 
$ cd testing/basics 
项 目 结构 如 下 : 


$ 1s 

Modash .js 
Modash .test.js 
complete/ 
package. json 





















































在 complete 文件 夹 中 你 可 以 找到 对 应 于 Modash.test.js 的 每 一 次 迭代 的 文件 版 本 
@ 以 及 Modash.js 的 完整 版 本 。 
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我 们 将 使 用 baber-node 从 命令 行 中 运行 测试 套件 。babel-node 已 包含 在 这 个 文件 夹 的 
package .json 中 。 现 在 继续 并 安装 package. json 中 的 包 : 


$ npm instal1 





为 了 编写 测试 ， 需要 一 个 库 来 测试 。 让 我 们 编写 一 个 可 测试 的 实用 程序 库 


8.1.1 准备 Modash 

我 们 将 在 Modash .js 中 编写 一 个 小 型 库 。 在 使 用 JavaScript 字符 串 时 , Modash 将 提供 一 些 可 能 
用 的 方法 。 我 们 将 编写 以 下 三 种 方法 ， 每 种 都 会 返回 一 个 字符 串 。 

truncate(string, length) 


如 果 string 的 长 度 超过 所 提供 的 lengtn， 则 将 其 截断 。 如 果 该 字符 串 被 截断 ， 那 么 它 将 以 ... 
结尾 。 














const s = 'All code and no tests makes Jack a precarious boy.'; 
Modash.truncate(s, 21); 


// => 'All code and no tests...' 
Modash .truncate(s, 100); 


// => 'All code and no tests makes Jack a precarious boy .， 


capitalize(string) 


将 string 的 首 字母 大 写 ， 其 余 小 写 : 





const s = 'stability was practically ASSURED.'; 
Modash .capitalize(s); 


// => 'Stability was practically assured. 


camelCase(string) 


接收 一 个 由 空格 、 破 折 号 或 下 划 线 分 隔 的 字符 串 ， 并 返回 其 驼峰 式 大 小 写 表 示 : 
let s = 'started at ; 
Modash .camelCase(s) ; 
// =>  'SstartedAt 
S = 'started_at'; 
Modash .camelCase(s); 
// => 'startedAt"' 








“Modash” 是 对 流行 的 JavaScript 工具 库 Lodash 的 戏称 。 


我 们 会 将 Modash 写成 一 个 ES6 模块 。 有 关 如 何 使 用 Babel 的 更 多 细节 ， 请 参见 下 面 的 “ES6: 使 
用 Babel 进行 导入 和 导出 ”。 如 果 需 要 复习 一 下 ES6 模块 的 知识 ， 请 参考 第 7 章 。 


现在 打开 Modash. js。 我 们 将 编写 该 库 的 三 个 函数 ， 然 后 在 这 个 文件 的 底部 导出 接口 。 
首先 为 truncate() 编 写 函 数 。 有 很 多 方法 可 以 做 到 这 一 点 ， 以 下 是 其 中 之 一 : 
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testing/basics/complete/Modash.js 





function truncate(string, length) { 
if (string.length > length) { 
return string.slice(0@, length) + ' 
} else { 
return string; 
} 
} 





接 下 来 实现 capitalize( ) 函数 : 
testing/basics/complete/Modash.js 





function capitalize(string) { 

return ( 
string.charAt(0) .toUpperCase() + string.slice(1).toLowerCase() 
好 
} 





最 后 编写 camelCase( ) 函数 ， 这 个 会 稍微 复杂 一 点 。 同 样 ， 有 多 种 方法 可 以 实现 它 ， 但 这 里 的 策 
略 如 下 所 示 。 

(1) 使 用 split() 方 法 获得 字符 串 中 的 单词 数组 。 空 格 、 破 折 号 和 下 划 线 会 被 视 为 分 隔 符 。 

(2) 创建 一 个 新 数组 。 该 数组 的 第 一 个 条 目 是 第 一 个 单词 的 小 写 版 本 。 其 余 的 条 目 是 后 续 每 个 单 
词 的 大 写 版 本 。 

(3) 使 用 join( ) 方 法 连接 该 数组 。 

如 下 所 示 : 

testing/basics/complete/Modash.js 



































function camelCase(string) { 
const words = string.split(/[\s|\-|_]+/); 
return [ 
words [9] .toLowerCase(), 
.. .Words.slice(1).map((w) => capitalize(w)), 
] :join(""); 
} 





字符 串 的 split() 方 法 可 以 将 一 个 字符 串 分 割 成 一 个 字符 串 数 组 ， 它 接收 一 个 需要 
名 分 割 的 字符 作为 参数 。 参 数 可 以 是 字符 事 ， 也 可 以 是 正则 表达 式 。 想 阅读 更 多 关于 
split() 的 内 容 ， 可 以 参考 MDN 文档 “String.prototype.split()”。 
数组 的 join() 方 法 可 以 将 数组 的 所 有 成 员 组 合成 一 个 字符 串 。 想 阅读 更 多 关于 
join() 的 内 容 ， 可 以 参考 MDN 文档 “Array.prototype.join()”。 
在 Modash .js 中 定义 了 这 三 个 函数 后 ， 我 们 准备 导出 模块 。 
在 Modash.js 的 底部 ， 首 先 创建 一 个 封装 方法 的 对 象 : 
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testing/basics/complete/Modash.js 





const Modash = { 
truncate, 
capitalize, 
camelCase, 


> 








然后 将 其 导出 : 
testing/basics/complete/Modash.js 





export default Modash; 

















本 节 将 在 Modash.test.js 文件 中 编写 测试 代码 。 现 在 在 文本 编辑 器 中 打开 该 文件 。 

















ES6: 使 用 Babel 进行 导入 和 导出 

package.json 已 包含 了 Babel。 此外, 我 们 还 包含 了 一 个 Babel 插件 : babel-plugin-transform- 
es2015-modules-commonjs。 

这 个 包 将 允许 我 们 使 用 ES6 的 导入 /导出 语法 。 重 要 的 是 ,我们 在 项 目的 .babelrc 文件 中 将 它 
指定 为 一 个 Babel 插件 : 


// basics/.babelrc 
{ 


"plugins": ["transform-es2015-modules-commonjs"] 


} 

有 了 这 个 插件 ， 现 在 可 以 从 一 个 文件 中 导出 模块 并 将 其 导入 另 一 个 文件 中 。 

但 是 ， 请 注意 这 个 解决 方案 在 浏览 器 中 无 法 工作 。 它 可 以 在 本 地 的 Node 运行 时 环境 工作 ， 这 
对 于 为 Modash 库 编写 测试 来 说 是 很 好 的 。 但 要 在 浏览 器 中 支持 它 ， 还 需要 额外 的 工具 。 如 上 一 章 
所 述 ， 浏 览 器 对 ES6 模块 的 支持 是 我 们 使 用 Webpack 的 一 个 主要 动机 。 








8.1.2 ”编写 第 一 个 用 例 
测试 套件 会 导入 正在 为 其 编写 测试 的 Modash 库 。 我 们 将 调用 该 库 中 的 方法 ， 并 对 方法 的 行为 进 
行 断言 。 
在 Modash.test.js 的 顶部 ， 让 我 们 先导 入 库 : 
testing/basics/complete/Modash.test-1.js 















































import Modash from './Modash'; 














第 一 个 断言 是 针对 truncate() 方 法 。 我 们 将 断言 ， 当 给 定 的 字符 串 超 过 所 提供 的 长 度 时 ， 
truncate( ) 方 法 将 返回 一 个 截断 的 字符 串 。 
首先 设置 测试 : 
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testing/basics/complete/Modash.test-1.js 





const string = 'there was one catch，and that was CATCH-22'; 
const actual = Modash.truncate(string, 19); 
const expected = 'there was one catch...'; 


, 








我 们 声明 了 测试 字符 串 样 本 string, 然后 设置 了 两 个 变量 : actual 和 expected。 在 测试 套件 中 ， 
actual 是 我 们 观察 的 调用 行为 。 在 本 例 中 , 它 就 是 Modash.truncate( ) 方 法 实际 返回 的 内 容 。expected 
是 我 们 所 期 望 的 值 。 

接 下 来 进行 测试 断言 。 我 们 将 打印 一 条 消息 ， 表 明 truncate( ) 方 法 是 通过 还 是 失败 : 

testing/basics/complete/Modash.test-1.js 












































if (actual !== expected) { 
console. log( 


~ [FAIL] Expected \‘truncate()\. to return '${expected}', got '${actual}'. 
好 
} else { 
console.1og(' [PASS] ‘truncate()..'); 
} 





试 试看 
在 这 个 阶段 ， 可 以 在 命令 行 中 运行 测试 套件 。 保 存 Modash.test.js 文件 并 从 testing/basics 
文件 夹 运行 以 下 命令 : 


./Node_modules/.bin/babel-node Modash.test. js 


执行 此 操作 时 ,可 以 看 到 打印 到 控制 台 的 [PASS] 消息 ( 见 图 8-1 ). 如 果 你 愿意 ,可 以 修改 Modash. js 
中 的 truncate 函数 来 观察 这 个 测试 失败 的 结果 ( 见 图 8-2 )。 











in 
向 .ynode_moduLes/y .bin/babeL-node Modash.test, js 
[PASS] `truncate()。 


in 
$ 








图 8-1 测试 通过 
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in 
EA 

[FAIL] Expected ‘truncate(). to return 'there was 
one catch,...', got 'there ... 


in 


$ 





图 8-2 ”测试 失败 的 例子 


8.1.3 assertEqual() 函数 
下 面 为 Modash 中 的 其 他 两 个 方法 编写 一 些 测试 。 


所 有 的 测试 都 将 遵循 类 似 的 模式 。 我 们 将 使 用 一 些 断 言 来 检查 actual 是 否 等 于 expected， 并 癌 
控制 台 打印 一 条 消息 ， 用 于 表明 被 测试 的 函数 是 通过 还 是 失败 。 


为 了 避免 代码 重复 , 我们 将 编写 一 个 assertEqual( ) 辅 助 函 数 。 该 函数 会 检查 它 的 两 个 参数 是 否 
相等 ;然后 会 编写 一 条 控制 台 消息 ， 用 于 表明 该 用 例 是 通过 还 是 失败 。 


在 Modash .test . js 的 顶部 和 Modash 导入 语句 下 方 声明 assertEqual 函数 : 
testing/basics/complete/Modash.test-2.js 






















































































import Modash from './Modash'; 


function assertEqual(description, actual, expected) { 


if (actual === expected) { 
console.log(* [PASS] ${description}); 
} else { 


console.log(“ [FAIL] ${description}); 
console.log(“\tactual: '${actual}'); 
console.log(“\texpected: '${expected}'); 





@ 制 表 符 在 JavaScript 中 表示 为 \t 字符 。 





























定义 了 assertEqual 函数 之 后 , 让 我 们 重新 编写 第 一 个 测试 用 例 。 我 们 将 在 整个 测试 套件 中 重用 
变量 actual 、expected 和 string， 因 此 我 们 将 使 用 let 声明 以 便 可 以 重新 定义 它们 : 








下 
四 
闻 
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testing/basics/complete/Modash.test-2.js 





let actual ; 
let expected; 
let string; 


string = 'there was one catch, and that was CATCH-22'; 
actual = Modash.truncate(string, 19); 
expected = 'there was one catch..."' 


x 


assertEqual('“truncate().: truncates a string', actual, expected); 





如 果 现 在 运行 Modash .test. js， 我 们 会 注意 到 一 切 都 和 原先 一 样 ， 只 是 控制 台 输 出 略 有 不 同 
( 见 图 8-3 )。 





in 
$ ./node_modules/.bin/babel-node Modash. test.js 
[PASS] “truncate() : truncates a string 


Ei 
$ 























图 8-3 ”测试 通过 
在 编写 了 assert 国 数 后 ， 我 们 再 编写 一 些 测 试 。 


本 个 断言 。 如 果 字 符 串 小 于 提供 的 长 度 ， 则 该 函数 应 按 原样 返回 
字符 串 。 我 们 将 使 用 相同 的 string 变量 ， 并 把 这 个 断言 写 在 当前 断言 的 下 : 


testing/basics/complete/Modash.test-2.js 






















































































actual = Modash.truncate(string, string.1length); 
expected = string; 


assertEqual('“truncate().: no-ops if <= length', actual, expected); 

















接 下 来 为 capitalize( ) 方 法 编写 断言 。 可 以 继续 使 用 相同 的 string 变量 : 
testing/basics/complete/Modash.test-2.js 








actual = Modash.capitalize(string); 
expected = 'There was one catch, and that was catch-22 ' 


assertEqual('“capitalize()`: capitalizes the string', actual, expected); 

















对 于 我 们 使 用 的 示例 字符 串 ， 这 个 断言 测试 了 capitalize( ) 方 法 的 两 个 方面 : 它 将 字符 串 中 的 
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第 一 个 字母 变 成 大 写 ， 并 将 其 余 的 字母 转换 为 小 写 。 
最 后 为 camelCase 函数 编写 断言 。 我 们 将 使 用 两 个 不 同 的 字符 串 来 测试 这 个 函数 。 一 个 由 空格 分 
隔 ， 而 另 一 个 由 下 划 线 分 隔 。 





空格 分 隔 的 字符 串 进 行 断 言 : 


testing/basics/complete/Modash.test-2.js 








string = 'customer responded at'; 
actual = Modash.camelCase(string); 
expected = 'customerRespondedAt'; 


assertEqual('“camelCase()`: string with spaces', 


actual, 


expected); 

















对 下 划 线 分 隔 的 字符 串 进行 断言 : 
testing/basics/complete/Modash.test-2.js 





string = 'customer_responded_at'; 
actual = Modash.camelCase(string); 
expected = 'customerRespondedAt'; 
assertEqual('， 


“camelCase().: string with underscores ' ， 


actual ， 


expected ) ; 





试 试看 








保存 Modash.test.js。 从 控制 台 运行 测试 套件 ( 见 图 8-4 ): 


./node_modules/.bin/babe1l1-node Modash .test. js 


in 


$ ./node_modules/.bin/babel~-node Modash.test.js 


[PASS] 
[PASS] 
[PASS] 


“truncate().: truncates a string 
‘truncate()“: no-ops if >= Length 
“capitalize()`: capitalizes the string 
‘camelCase()“: string with spaces 
‘camelCase()*: string with underscores 


[PASS] 
[PASS] 


in 


$ 





图 8-4 














测试 通过 








可 以 随意 调整 每 个 断言 的 expected 的 值 或 者 修改 库 ， 然 后 观察 测试 失败 的 情况 。 


我 们 的 微型 断言 框架 








很 清晰 ， 但 有 局 限 性 。 








既 可 维护 又 可 扩展 。 虽 然 assertEqual() 国 数 可 以 很 好 地 检查 字符 串 











时 ,我 们 需要 使 用 











含 特定 的 元 素 。 


复杂 的 断言 。 例 如 ， 我 们 可 


对 于 更 复杂 的 应 用 程序 或 模块 ， 很 难 想象 它 可 以 做 到 
是 否 相 等 ,但 在 处 理 对 象 或 数组 
能 希望 检查 对 象 是 否 包含 特定 的 属性 或 者 数组 是 否 包 
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8.2 Jest 是 什么 


JavaScript 有 各 种 各 样 的 测试 库 ， 它 们 包含 了 许多 很 棒 的 特性 。 这 些 库 帮 助 我 们 以 稳健 且 可 维护 








的 方式 来 组 织 测试 套件 。 其 中 许多 库 完 成 了 相同 领域 的 任务 ， 但 使 用 的 方法 不 同 。 











二 你 可 能 听 说 过 或 使 用 过 的 测试 库 示 例 包 括 Mocha、Jasmine、QUnit、Chai 和 Tape。 





我 们 认为 测试 库 具 有 以 下 三 个 主要 组 成 部 分 。 

















在 控制 台中 将 结果 报告 给 你 。 














e 测试 运行 程序 。 这 就 是 你 在 命令 行 中 执行 的 操作 。 测 试 运行 程序 负责 查找 测试 并 运行 ， 然 后 


e 用 于 组 织 测试 的 领域 特定 语言 。 正 如 我 们 将 看 到 的 ， 这 些 函 数 会 帮助 我 们 在 运行 测试 之 前 和 


之 后 执行 一 些 常见 的 任务 ， 比 如 编排 设置 和 拆 印 。 











@ 一 个 断言 库 。 这 些 库 提供 的 assert 函数 可 帮助 我 们 轻松 地 进行 复杂 的 断言 ， 








JavaScript 对 象 之 间 是 否 相 等 或 数组 中 某 些 元 素 是 否 存在 。 





React 开发 人 员 可 以 选择 使 用 他 们 喜欢 的 任何 JavaScript 测试 框架 进行 测试 。 本 书 将 重 ， 


个 : Jest。 


Facebook 创造 了 Jest， 并 负责 维护 。 如 果 你 使 
言 的 测试 框架 ， 就 会 发 现 Jest 看 上 去 非常 熟悉 。 























Pn 


过 其 他 JavaScript 涡 
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口 





比如 检查 




















对 于 断言 ，Jest 使 用 了 Jasmine 的 断言 库 。 你 如 果 以 前 使 用 过 Jasmine， 那 么 会 很 高 兴 知 道 它们 


语法 是 完全 相同 的 。 


@ 本 章 稍 后 将 探讨 Jest 与 其 他 JavaScript 测试 框架 的 最 大 区 别 : 模拟 。 


8.3 使 用 Jest 


你 会 注意 到 Jest 已 包含 在 testing/basics/package.json 中 。 


从 Jest 15 开始 ，Jest 会 把 任何 以 k .test .js 或 *.spec.js 结尾 的 文件 视 为 测试 。 因 为 文件 名 为 
Modash.test.js， 所 以 无 须 做 任何 特殊 操作 来 告知 Jest 这 是 一 个 测试 文件 。 











我 们 将 使 用 Jest 重 写 Modash 的 用 例 。 











Jest 15 


件 夹 中 。 此 外 ， 在 本 章 的 后 面 ， 你 会 注意 到 Jest 的 自动 模拟 似乎 已 被 关 


同时 又 能 维护 Jest 的 理念 ， 即 “需要 的 配置 越 少 越 好 ”。 





闭 。 


如 果 以 前 使 用 过 Jest 的 旧版 本 ， 你 可 能 会 感到 惊讶， 因为 现在 测试 不 必 位 于 一 个 _tests_ 文 


Jest 15 为 Jest 提供 了 新 的 默认 设置 。 这 些 更 改 的 动机 是 让 新 的 开发 者 开始 使 用 Jest 时 更 容易 ， 
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你 可 以 在 Jest 网 站 Christoph Nakazawa 的 博文 “Jest 15.0 一 New Defaults for Jest” 中 了 解 到 所 有 
的 变化 。 与 本 章 相关 的 内 容 如 下 : 
@ 除了 在 _tests_ 文件 夹 下 查找 测试 文件 外 ，Jest 还 查找 匹配 x .test.js 或 *.spec.js 的 文 
件 ; 
@ 自动 模拟 在 默认 情况 下 是 禁用 的 。 








8.3.1 expect() 
在 Jest 中 ,我 们 使 用 expect() 语 句 来 进行 断言 。 我 们 将 看 到 ， 它 的 语法 与 之 前 编写 的 assert 阴 
数 不 同 。 
因为 Jest 使 用 了 Jasmine 断言 库 ， 所 以 从 技术 上 讲 ， 这 些 匹配 器 是 Jasmine 的 特性 
而 不 是 Jest 的 特性 。 但 是 为 了 避免 混淆 , 本章 将 Jest 附带 的 所 有 东西 (包括 Jasmine 
断言 库 ) 都 称 为 Jest。 


下 面 是 一 个 使 用 expect 语法 来 断言 true 为 true 的 例子 : 

expect(true) .toBe(true) 

toBe 是 一 个 匹配 器 。Jest 附带 了 几 个 不 同 的 匹配 器 。 在 底层 ，toBe 匹配 器 使 用 了 === 操 作 符 来 检 
查 相等 性 。 因 此 下 面 这 些 结果 都 符合 预期 : 


expect(1).toBe(1); // 通过 
const a = 5; 
expect(a).toBe(5); // 通过 


因为 toBe 只 使 用 了 === 操 作 符 ， 所 以 它 具 有 局 限 性 。 例 如 ， 虽然 可 以 使 用 toBe 来 检查 对 象 是 否 
完全 相同 : 


const a { espresso: '60m1' }; 
const b ai 
expect(a) .toBe(b); // 通过 


但 是 如 果 想 检查 两 个 不 同 的 对 象 是 否 相 等 该 怎么 办 ? 


const a = { espresso: '60m1' }; 
expect(a).toBe({ espresso: '60m1' }) // 失败 


Jest 还 有 另 一 个 匹配 器 : toEqual 。toEqual 比 toBe 更 复杂 ， 就 我 们 的 目的 而 言 ， 它 可 以 断言 两 
个 对 象 是 相等 的 ， 即 使 它们 不 是 完全 相同 的 对 象 ; 


const a = { espresso: '60m1' }; 
expect(a).toEqual({ espresso: '60m1l1' }) // 成 功 


本 章 会 同时 使 用 toBe 和 toEqual。 我们 倾向 于 将 toBe 用 于 布尔 值 和 数字 的 断言 ， 而 将 toEqual 
用 于 其 他 类 型 的 断言 。 可 以 将 toEqual 用 于 所 有 类 型 ,但 在 某 些 情况 下 ,我 们 使 用 toBe ， 因 为 喜欢 
它 的 英文 读 法 。 这 只 是 个 人 喜好 的 问题 ， 重 要 的 是 你 要 理解 两 者 之 间 的 区 别 。 

与 其 他 许多 测试 框架 一 样 ， 在 使 用 Jest 时 , 我们 会 将 代码 组 织 成 describe 块 和 it 块 。 为 了 了 解 
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这 个 组 织 方 式 ， 下 面 编写 第 一 个 Jasmine 测试 ， 将 Modash .test .js 的 内 容 替 换 为 以 下 内 容 : 


testing/basics/complete/Modash.test-3.js 





describe('My test suite'，() => { 
it('“true. should be ‘true’', () => { 
expect(true) .toBe(true ) ; 
}); 


it('“false. should be `false`'，() => { 
expect(false) .toBel(false); 

}); 
1 














describe 块 和 it 块 都 包含 一 个 字符 串 和 一 个 函数 。 字 符 串 只 是 一 个 人 性 化 的 描述 ， 稍 后 我 们 将 





看 到 它 被 打印 到 控制 台中 。 














我 们 将 在 本 章 中 看 到 ，describe 块 是 用 于 组 织 属于 相同 功能 或 上 下 文 的 断言 ; it 块 则 是 独立 的 


断言 或 用 例 。 





Jest 要 求 我 们 始终 要 有 一 个 封装 所 有 代码 的 顶级 describe 块 。 在 这 里 ， 顶级 describe 块 被 命名 
为 'My test suite'。 由 套 在 这 个 describe 块 中 的 两 个 it 块 是 我 们 的 用 例 。 这 是 标准 的 组 织 方式 : 








describe 块 不 包含 断言 ， 而 it 块 会 包含 。 


在 本 章 的 其 余部 分 , “断言 ” 指 的 是 对 expect() 函 数 的 调用 , “用例 ” 指 的 是 一 个 





it 抉 。 
试 试看 
在 package.json 中 ， 我 们 已 定义 了 一 个 test 脚本 。 因 此 ， 可 以 执行 以 下 命令 来 运行 测试 套件 
( 见 图 8-5 ): 
$ npm test 


in 
$ npm test 
BS ./Modash.test.is 
Modash 
"truncate() : truncates a string (4ms) 


Test Summary 
》Ran all tests. 
[3 


in 
$ 





图 8-5 ”两 个 测试 都 通过 
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8.3.2 Modash 的 第 一 个 Jest 测 试 
下 面 用 一 些 有 用 的 测试 Modash 的 工具 来 替换 此 测试 套件 。 
再 次 打开 Modash .test. js 并 清空 它 的 内 容 。 在 顶部 导入 库 : 


testing/basics/complete/Modash.test-4.js 
























































import Modash from './Modash'; 





将 describe 块 命名 为 'Modash': 


describe('Modash', () => { 
// 在 此 处 断言 
上 


通常 ， 顶 级 describe 会 被 命名 为 当前 正在 测试 的 模块 名 。 
下 面 做 第 一 个 断言 ， 即 断言 truncate( ) 函数 是 有 效 的 : 


testing/basics/complete/Modash.test-4.js 























describe('Modash', () => { 
it(' ‘truncate().: truncates a string', () => { 


const string = 'there was one catch, and that was CATCH-22 ' ; 
expect( 
Modash.truncate(string, 19) 
).toEqual('there was one catch...'); 
}); 
} 








我 们 对 断言 的 组 织 方式 有 所 不 同 , 但 是 逻辑 和 最 终结 果 都 和 以 前 相同 。 要 注意 expect 和 toEqual 
函数 是 如 何 提供 一 种 人 类 可 读 的 格式 来 表达 正在 测试 的 内 容 以 及 我 们 期 望 的 表现 。 




















试 试看 
保存 Modash .test .js。 运 行 该 单个 用 例 的 测试 套件 ( 见 图 8-6 ): 
$ npm test 


BES ./Modash.test.js 
Modash 
“truncate()\ 
tru 


Test Summary 
» Ran all tests. 
(5 total in 1 test suite, run time 2.395s) 


in 


$ 











图 8-6 测试 通 ; 








注 
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8.3.3” 男 一 个 truncate( ) 用 例 


truncate( ) 函数 有 第 二 个 断言 。 我 们 断言 传人 truncate( ) 函数 中 的 字符 串 如 果 小 于 指定 的 长 度 ， 
则 返回 相同 的 字符 串 。 

因为 这 两 个 断言 都 对 应 于 Modash 模块 中 的 相同 方法 ,所 以 将 它们 封装 在 自己 的 describe 块 中 是 
合理 的 。 让 我 们 添加 下 一 个 用 例 ， 并 将 它 包 装 在 新 的 describe 块 中 : 

testing/basics/complete/MIodash.test-S.js 
































describe('Modash', () => { 
describe('“truncate().', () => { 
const string = 'there was one catch, and that was CATCH-22'; 


it('truncates a string', () => { 
expect( 
Modash.truncate(string, 19) 
).toEqual('there was one catch...'); 


> 


it('no-ops if <= length', () => { 
expect( 
Modash.truncate(string, string.1length) 
).toEqual(string); 
}); 
I 
的 




















通常 会 使 用 describe 块 对 测试 进行 分 组 。 





注意 ,我 们 在 truncate( ) 顶 部 的 describe 块 中 声明 了 要 测试 的 string: 
testing/basics/complete/MIodash.test-S.js 





describe('Modash', () => { 
describe(' “truncate().', () => { 
const string = 'there was one catch, and that was CATCH-22'; 











当 变量 以 这 种 方式 在 describe 块 内 部 声明 时 ， 它 们 是 在 每 个 it 块 的 作用 域内 。 
此 外 ， 我 们 略微 修改 了 每 个 用 例 的 标题 。 可 以 删除 开头 的 truncate(): ， 因 为 这 些 用 例 都 在 标题 


人 小 丰 人 























为 'truncate()' 的 describe 块 下 。 如 果 其 中 一 个 用 例 失 几 了， 那么 Jest 会 这 样 显示 : 


— Modash > ‘truncate(). > no-ops if less than length 


这 就 为 我 们 提供 了 所 需 的 所 有 上 下 文 。 
8.3.4 其 余 的 用 例 
我 们 将 把 其 他 两 个 方法 的 用 侦 


describe('Modash', () => { 


describe('“truncate().', () => { 
AR `truncate()” 用 例 






































Le 





封装 在 它们 各 自 的 describe 块 中 ， 如 下 所 示 ;: 
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上 

describe(' capitalize()"，() => { 
// “capitalize()” 用 例 

> 

describe('“‘camelCase().', () => { 
// “camelCase()” 用 例 

}); 


}); 
首先 是 capitalize( ) 也 数 的 用 例 : 
testing/basics/complete/Modash.test-6.js 











describe('capitalize()', () => { 
it('capitalizes first letter, lowercases rest', () => { 


const string = 'there was one catch, and that was CATCH-22'; 
expect( 

Modash.capitalize(string) 
) .toEqual( 


"There was one catch, and that was catch-22 
) 
}); 
}); 


注意 ，truncate() 国 数 的 describe 块 中 的 string 不 在 此 处 的 作用 域内 ， 因 此 我 们 需要 在 这 个 




















用 例 的 顶部 声明 一 个 string 变量 。 





最 后 编写 一 套 camelCase( ) 的 用 例 : 


testing/basics/complete/MIodash.test-0.js 





describe('camelCase()', () => { 
it('camelizes string with spaces', () => { 
const string = 'customer responded at'; 
expect( 
Modash.camelCase(string) 
) .toEqual('customerRespondedAt' ) ; 


es 

it('camelizes string with underscores', () => { 
const string = 'customer_responded_at'; 
expect( 


Modash.camelCase(string) 
) .toEqual('customerRespondedAt' ) ; 





上 
1 
试 试看 
保存 Modash.test. js。 从 命令 行 启动 Jest: 
$ npm test 


我 们 会 看 到 所 有 的 测试 都 将 通过 ( 见 图 8-7 )。 
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了 
Modash 
‘truncate(). 


Test Summa 
>» Ran all tests. 
(5 total in 1 test suite, run time 2.395s) 


in 


$ 








图 8-7 所 有 测试 都 通过 
我 们 已 介绍 了 断言 的 基础 知识 , 并 将 代码 组 织 到 describe 块 和 it 块 中 , 上 且 还 使 用 了 Jest 测试 运 
行程 序 。 下 面 来 看 如 何 将 这 些 片段 组 合 在 一 起 来 测试 React 应 用 程序 。 在 此 过 程 中 ,我们 将 更 深入 地 
研究 Jest 的 断言 库 ， 并 组 织 行为 驱动 的 测试 套件 的 最 佳 实践 。 



























































8.4 ”React 应 用 程序 的 测试 策略 

在 软件 测试 中 ， 测 试 分 为 两 大 类 : 集成 测试 和 单元 测试 。 
8.4.1 集成 测试 与 单元 测试 

集成 测试 是 将 多 个 模块 或 软件 系统 的 各 个 部 分 一 起 进行 测试 的 测试 。 对 于 React 应 用 程序 ， 可 以 
将 每 个 组 件 视 为 单独 的 模块 。 因 此 ， 集 成 测试 会 涉及 对 应 用 程序 进行 整体 测试 。 

集成 测试 可 能 会 更 进一步 。 如 果 React 应 用 程序 正在 与 API 服务 器 进行 通信 ， 那么 集成 测试 也 可 
能 涉及 与 该 服务 器 的 通信 。 开 发 人 员 通 常 喜欢 将 这 些 类 型 的 集成 测试 称 为 端 到 端 测 试 。 

有 几 种 方法 可 以 驱动 端 到 端 测试 ,一 种 流行 的 方法 是 使 用 像 Selenium 这 样 的 驱动 程序 在 浏览 器 中 
以 编程 的 方式 加 载 应 用 程序 ， 并 自动 导航 应 用 程序 的 界面 。 你 可 能 会 让 程序 点 击 按钮 或 填写 表单 ， 在 
这 些 交 互 完成 之 后 断言 页 面 的 外 观 。 或 者 你 可 以 对 服务 器 上 的 数据 存储 的 结果 状态 进行 断言 。 

集成 测试 是 大 型 软件 系统 的 综合 测试 套件 中 的 重要 组 成 部 分 。 然 而 在 本 书 中 ， 我 们 将 只 专注 于 
React 应 用 程序 的 单元 测试 。 

在 单元 测试 中 ， 软 件 系 统 的 模块 是 隔离 测试 的 。 

对 于 React 组 件 ， 我 们 将 使 用 两 种 断言 。 

(1) 给 定 一 组 输入 (state 和 props )， 断 言 组 件 应 该 输出 什么 演 染 )。 

CO) 给 定 一 个 用 户 操作 ， 断 言 组 件 的 行为 。 组 件 可 能 进行 状态 更 新 或 调用 父 组 件 传递 给 它 的 属性 
函数 。 
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8.4.2” 浅 泻 染 

当 React 组 件 在 浏览 器 中 演 染 时 ， 它 会 被 写 人 DOM 中 。 虽 然 我 们 通常 会 在 浏览 器 中 直观 地 看 到 
一 个 DOM, 但 可 以 将 一 个 “无 头 ”的 DOM 加 载 到 测试 套件 中 。 可 以 使 用 DOM 的 API 来 编写 和 读 取 
React 组 件 ， 就 像 直接 使 用 浏览 器 一 样 ， 但 还 有 另 一 种 选择 : 浅 演 染 。 

通常 ， 当 一 个 React 组 件 泻 染 时 , 它 会 首先 生成 其 虚拟 DOM 表示 ; 然后 使 用 这 个 虚拟 DOM 表示 
对 真实 DOM 进行 更 新 。 

当 一 个 组 件 被 浅 演 染 时 ， 它 不 会 被 写 人 DOM 中 ， 而 是 维护 其 虚拟 DOM 表示 。 然 后 你 可 以 像 对 
真实 DOM 一 样 对 这 个 虚拟 DOM 进行 断言 。 

此 外 ,你 的 组 件 只 会 泻 染 一 层 深 度 ( 因此 称 为 “ 浅 ” 演 染 )。 因此， 如 果 组 件 的 render( ) 函数 包 
含 子 组 件 ， 那 么 这 些 子 组 件 实际 上 不 会 被 演 染 。 相 反 ， 虚 拟 DOM 表示 将 只 包含 对 未 演 染 的 子 组 件 的 
引用 。 

React 提供 了 一 个 库 来 浅 演 染 React 组 件 ， 即 react-test-renderer 库 。 这 个 库 很 有 用 ， 但 有 点 
低级 ， 且 可 能 会 很 元 长 。 

Enzyme 是 一 个 封装 了 react-test-renderer 的 库 , 提供 了 许多 实用 的 功能 , 是 有 助 于 编写 React 
组 件 测 试 。 




































































8.4.3 Enzyme 


Enzyme 最 初 是 由 Airbnb 公司 开发 的 ， 并 在 React 开源 社区 中 被 广泛 采用 。 事 实 上 ，Facebook 在 
其 react-test-renderer 的 文档 中 推荐 了 这 个 实用 程序 。 按照 这 种 趋势 ， 本 章 将 使 用 Enzyme 而 不 是 
Teact-test-TendereT。 

通过 react-test-renderer ，Enzyme 将 允许 我 们 浅 泻 染 组 件 。 我 们 不 使 用 ReactDOM.render() 
将 组 件 泻 染 到 真实 的 DOM 中， 而 是 使 用 Enzyme 的 shallow( ) 方 法 来 对 它 进 行 浅 泻 染 ; 


const wrapper = Enzyme.shallow( 
<App /> 
2) 


我 们 很 快 就 会 看 到 ，shallow( ) 函数 返回 一 个 EnzymeWrapper 对 象 。 这 个 对 象 内 部 在 套 的 是 在 虚 
拟 DOM 表示 中 的 浅 泻 染 组 件 。EnzymeWrapper 为 我 们 提供 了 一 系列 有 用 的 方法 来 遍历 和 编写 针对 该 
组 件 的 虚拟 DOM 的 断言 。 
如 果 将 来 你 想 要 直接 使 用 react-test-renderer, 就 会 发 现 了 解 Enzyme 很 有 帮助 。 
因为 Enzyme 是 在 react-test-renderer 上 的 轻 量 级 包装 ， 所 以 它们 的 API 有 很 多 
共同 之 处 。 
浅 泻 染 有 两 个 主要 优势 。 
对 组 件 进 行 单独 测试 
这 对 于 单元 测试 是 更 可 取 的 。 当 我 们 为 父 组 件 编写 测试 时 ， 不必 担心 对 子 组 件 的 依赖 。 修 改 子 组 
件 可 能 会 破坏 子 组 件 的 单元 测试 ， 但 不 会 破坏 任何 父 组 件 的 单元 测试 。 
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更 快 


男 一 个 好 处 是 测试 速度 会 更 快 。 对 真实 DOM 进行 泻 染 、 操 作 和 读 取 都 会 增加 开销 。 使 用 浅 泻 染 ， 





就 可 以 完全 避免 使 用 DOM。 





我 们 将 看 到 ，Enzyme 有 一 个 API 来 模拟 浅 演 染 组 件 的 DOM 事件 。 例如， 即使 DOM 不 存在 的 情 


况 下 ， 它 也 允许 我 们 “点 击 








”组 件 。 


8.5 使 用 Enzyme 测试 基本 的 React 组 件 


我 们 将 通过 给 基本 的 React 组 件 编写 测试 来 熟悉 Enzyme。 

















8.5.1 设置 


在 testing/react-basics 文件 夹 中 是 一 个 使 用 create-react-app 创建 的 应 用 程 








testing/basics 文件 夹 使 





入 cd 命令 进入 该 目录 : 








$ cd ../react-basics 
安装 软件 包 : 
$ npm i 


大 第 7 章 详 细 介 绍 了 create-react-app。 


看 目录 : 


$ 1s 

public 
node_modules/ 
package. json 
srce/ 


然后 是 src/ 目 录 : 


$ 1s src/ 

App .css 

App .js 

App .test .js 
complete 

index .css 

index .js 
Semantic-ui 
setupTIests. js 
tempPolyfills.js 


这 个 create-react-app 应 用 程序 的 基本 组 


组 结 


一 \ 一 口 





1 


序 。 从 








构 与 上 一 意 中 


P 的 相同 : App.js 定义 了 一 个 App 组 


件 ; index. js 调用 了 ReactDOM.render() 国 数 ; 它 还 包含 了 Semantic UI 用 于 样式 设置 。 


@ 稍 后 会 讨论 setupTests. js 和 tempPolyfills.js。 
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8.5.2 App 组 件 

在 查看 App 组 件 之 前 ， 我 们 先 在 浏览 器 中 看 一 下 它 。 启 动 应 用 程序 : 

$ npm start 

这 个 应 用 程序 很 简单 。 它 有 一 个 字段 和 一 个 向 列表 添加 子 项 的 按钮 ， 且 无 法 删除 列表 中 的 子 项 
( 见 图 8-8 )。 





四 四 四 /reactApp 下 
€ GCG © localhost:3000/? 本 
ltems 
Cilantro 
Lime juice 
Jalapeiio pepper 


Onions 





Add item... 


图 8-8 ”完整 的 列表 应 用 程序 


打开 App.js， 正 如 我 们 在 state 的 初始 化 中 所 看 到 的 ，App 组 件 具 有 两 个 状态 属 ' 
testing/react-basics/src/App.js 








调 
乓 











class App extends React.Component { 
state = { 
items: [], 
item: '', 


小 





items 是 子 项 的 列表 。item 是 与 受 控 输 入 相关 联 的 状态 属性 ， 我 们 稍 后 就 会 看 到 。 
在 render( ) 洱 数 内 部 ，App 组 件 遍 历 this .state.items， 以 在 一 个 表 中 演 染 所 有 的 子 项 : 
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testing/react-basics/Src/App.js 
《七 bodyy》> 
{ 
this.state.items.map((item, idx) => (人 
<tr 
key={idx} 
> 
<td>{item} </td> 
tr 
) ) 
】 
</tbody> 
受 控 输入 是 标准 输入 ， 它 位 于 表单 内 部 : 
testing/react-basics/src/App.js 
className='ui form' 


<form 
onSubmit={this.addItem} 


> 


<div className='field'> 
<input 
className='prompt" 
type='text"' 
placeholder='Add item...' 
value={this .state. item} 
onChange={this .onItemChange} 


对 于 input 元 素 ，onItemChange( ) 函数 按 预期 将 item 设置 到 状态 中 : 


/> 





者 有 关 受 控 输 入 的 更 多 人 信息， 参见 6.2.3 节 。 








onItemChange = (e) => { 
this.setState({ 
item: e.target.value, 


} > 
;> 





testing/react-basics/src/App.js 
对 于 form 元 素 ，onSubmit 调用 addItem( ) 函数 。 此 函数 将 新 项 添加 到 状态 并 清空 item 属性 : 


testing/react-basics/Src/App.js 





addItem = (e) => { 
e.preventDefault(); 
this.setState({ 

items: this.state.items.concat( 


this.state. item 
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最 后 看 按钮 : 
testing/react-basics/Src/App.js 





<button 
ClassName=' ui button 
type="'submit" 
disabled={submitDisabled} 
> 
Add item 
</button> 








我 们 在 按钮 上 设置 了 disabled 属性 。submitDisabled 变量 在 render() 函数 的 顶部 定义 ， 它 的 
值 取 决 于 输入 字段 是 否 被 填充 : 
testing/react-basics/Src/App.js 











render() { 
const submitDisabled = !this.state.item; 
return( 





8.5.3 App 组 件 的 第 一 个 用 例 

为 了 编写 第 一 个 用 例 ， 需 要 有 两 个 库 : Jest 和 Enzyme。 

在 上 一 章 中 ， 我 们 注意 到 create-react-app 在 package. json 中 设置 了 一 些 命令 ， 其 中 一 个 
就 是 test。 


react-scripts 已 将 Jest 指定 为 依赖 项 。 要 启动 Jest， 只 需 运 行 npm test 命令 。 与 create- 
react-app 创建 的 其 他 命令 一 样 ，test 在 react-scripts 中 运行 了 一 个 脚本 。 该 脚本 配置 并 执 
行 Jest。 























若 要 查看 react-scripts 包含 的 所 有 的 包 , 请 看 ./node_modules/react-scripts/ 
package. json 文件 。 


create-react-app 在 App.test.js 中 为 我 们 设置 了 一 个 虚拟 测试 ,下 面 从 testing/react-basics 
文件 夹 内 部 执行 Jest， 并 看 看 会 发 生 什么 。 


$ npm test 


Jest 运行 ， 生 成 了 一 个 格式 良好 的 测试 套件 的 结果 报告 ( 见 图 8-9 )。 
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App.test.js 
without crashing (58ms) 


Test Summa 
>» Ran all tests. 
(1 total in 1 test suite, run time 3.057s) 


Watch U 
» Pres 





图 8-9 ”运行 测试 样 例 
react-scripts 为 Jest 提供 了 一 些 额 外 的 配置 。 一 种 配置 是 在 监视 模式 下 启动 Jest。 在 这 种 模式 
下 ， 测 试 套件 执行 完成 后 Jest 不 会 退出 ， 而 是 会 监视 整个 项 目 中 的 变化 。 当 检测 到 变化 时 ， 它 会 重新 
运行 测试 套件 。 
本 章 将 继续 指导 你 使 用 npm test 命令 执行 测试 套件 。 但 是 ， 如 果 你 愿意 ， 也 可 以 
在 监视 模式 下 来 运行 Jest， 不 过 要 保持 控制 人 台 窗 口 打开 。 


























1. 设置 Enzyme 

为 了 使 用 Enzyme， 我 们 需要 以 下 准备 : 

(1) 确保 安装 了 所 有 需要 的 软件 包 ; 

(2) 包含 指示 Enzyme 使 用 哪 一 种 React 适配器 的 指令 ; 

(3) 包含 React 16 的 补丁 。 

我 们 将 依次 深入 研究 这 些 内 容 。 

确保 安装 了 所 有 需要 的 软件 包 

react-scripts 没有 包含 enzyme ， 因 此 我 们 需要 将 它 包 含 在 package .json 中 。 

enzyme 包装 了 react-test-renderer ， 因 此 ， 它 也 依赖 于 这 个 安装 包 。 你 也 会 在 package. json 
中 看 到 这 个 依赖 项 。 

此 外 ， 需 要 包含 Enzyme 使 用 的 适配器 。Enzyme 为 React 的 每 个 版 本 提供 了 适配器 。 因 为 我 们 使 

的 是 React 16 ,所 以 需要 在 package . json 中 包含 React 16 的 适配器 , 即 enzyme-adapter-react-16。 

































































@ 将 来 ， 如 果 你 想 将 所 有 这 些 依赖 添加 到 项 目 中 ， 只 需 运 行 ， 

npm i --save-dev enzyme react-test-renderer enzyme-adapter-react-16 
包含 指示 Enzyme 使 用 哪 一 种 React 适配器 的 指令 
在 运行 测试 套件 之 前 ， 需 要 指示 Enzyme 使 用 React 16 适配器 。 该 指令 如 下 所 示 : 
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import Enzyme from "enzyme ' ， 
import Adapter from 'enzyme-adapter-react-16'; 


Enzyme.configure({ adapter: new Adapter() }); 


可 以 在 每 个 用 例文 件 的 顶部 包含 这 段 代码 ,但 如 果 要 为 更 多 组 件 添加 更 多 用 例文 件 ， 那么 这 将 很 


相反 ， 可 以 在 src/ 目 录 中 创建 一 个 名 为 setupTests .js 的 文件 。Create React App 配置 Jest， 以 
便 在 运行 每 个 测试 套件 之 前 自动 加 载 此 文件 。 
在 src/ 内 部 ， 可 以 看 到 此 文件 已 存在 : 


testing/react-basics/src/setupTests.js 












































import raf from './tempPolyfills' 


import Enzyme from 'enzyme'; 
import Adapter from '‘'enzyme-adapter-react-16'; 


Enzyme.configure({ adapter: new Adapter() }); 








该 文件 包含 指示 Enzyme 使 用 React 16 适配器 的 代码 段 ， 但 导入 tempPolyfills .js 的 这 一 行 到 
底 是 什么 意思 呢 ? 


包含 React 16 的 补丁 


React 16 的 底层 架构 依赖 于 一 个 名 为 requestAnimationFrame 的 浏览 器 API。 它 包含 在 现代 浏览 
需 的 JavaScript 环境 中 。 


当 在 测试 环境 中 运行 React 时 ， 此 浏览 器 API 将 不 存在 。 因 此 ，React 会 抛 出 错误 。 

在 撰写 本 书 时 ，React 16 才刚 刚 发 布 。 关 于 如 何在 测试 环境 中 处 理 此 缺失 API，GitHub 网 站 
facebook/create-react-app 页 面 有 一 个 讨论 ， 可 能 新 版 Create React App 会 自动 处 理 这 种 情况 。 

与 此 同时 ， 我 们 也 提供 了 一 个 变通 方案 。 在 tempPolyfills.js 中 ， 可 以 看 到 我 们 定义 了 一 个 虚 
拟 的 requestAnimationFrame API: 

















testing/react-basics/src/tempPolyfills.js 





const raf = global.requestAnimationFrame = (cb) => { 
setTimeout(cb, 0); 


所 


export default raf; 

















requestAnimationFrame 的 回 退 或 polyfil 足以 使 React 在 测试 环境 中 按 预期 运作 。 


个 同样 ， 在 撰写 本 书 时 React 16 仍然 非常 新 。 和 希望 在 即将 发 布 的 版 本 中 ,Enzyme 的 设 
置 和 React 测试 的 一 些 仪式 会 减少 。 如 果 你 愿意 ， 可 以 参考 GitHub 网 站 
facebook/create-react-app 页 面 ， 以 了 解 对 于 新 项 目 来 说 是 否 仍 需要 使 用 polyfill。 
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2. 编写 用 例 
设置 好 Enzyme 之 后 ， 我 们 就 可 以 使 用 更 有 用 的 东西 来 替换 App.test. js 中 的 用 例 了 。 
打开 App.test.js 并 清空 文件 。 在 该 文件 的 顶部 ， 首 先导 和 要 测试 的 React 组 件 : 


testing/react-basics/src/complete/App.test.complete-1.js 




















import App from './App'; 








接 下 来 从 react 库 中 导入 React ， 并 从 enzyme 库 中 导入 shallow(): 


testing/react-basics/src/complete/App.test.complete-1.js 





import React from 'react'; 
import { shallow } from 'enzyme'; 
































在 Enzyme 中 ，shallow( ) 是 我 们 唯一 要 使 用 的 函数 ， 因 此 我 们 在 导入 中 明确 指定 了 它 。 可 能 你 
已 猜 到 ， 我 们 将 使 用 shallow( ) 函数 来 浅 演 染 组 件 。 























i 如 果 需 要 复习 一 下 ES6 导入 语法 ， 参 见 第 7 章 。 


我 们 将 在 被 测 模块 准备 就 绪 后 为 describe 块 添加 标题 : 


describe('App', () => { 
// 我 们 在 此 处 断言 
下 


下 面 编写 第 一 个 用 例 。 我 们 将 断言 该 表 应 该 使 用 “Items” 表 头 进行 泻 染 ， 


describe('App', () => { 

it('should have the ‘th "Items"', () => { 
// 我 们 在 此 处 断言 
}); 


























// 在 此 处 编写 剩余 的 断言 
] ) ; 


为 了 编写 这 个 断言 ， 我 们 需要 进行 以 下 操作 : 
e@ 浅 泻 染 该 组 件 ; 

e@ 遍历 虚拟 DOM， 找 出 第 一 个 th 元 素 ; 

e@ 源 言 该 元 素 包含 一 个 “Items” 的 文本 值 。 
首先 浅 演 染 组 件 : 


testing/react-basics/src/complete/App.test.complete-1.js 








it('should have the ‘th "Items"', () => { 
const wrapper = shallow( 

<ApP /> 

癌 





如 前 所 述 ，shallow( ) 函数 返回 一 个 Enzyme 称 之 为 “包装 器 ”的 对 象 ， 即 ShallowWrapper。 这 
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个 包装 器 包含 浅 泻 染 的 组 件 。 记 住 ， 这 里 没有 实际 的 DOM ， 而 是 将 该 组 件 的 虚拟 DOM 表示 保存 在 
包装 需 中 。 


Enzyme 提供 包装 器 对 象 有 很 多 有 用 的 方法 ， 我 们 可 以 用 它们 来 编写 断言 。 通 常 这 些 辅助 方法 可 
以 帮助 我 们 遍历 和 选择 虚拟 DOM 上 的 元 素 。 


下 面 来 看 这 些 实际 是 如 何 工作 的 。 其 中 有 一 个 辅助 方法 是 contains() ， 我 们 将 使 用 它 来 断言 表 
头 是 存在 的 : 


testing/react-basics/src/complete/App.test.complete-1.js 






































it('should have the ‘th "Items"', () => { 
const wrapper = shallow( 
<ApP /> 
) 
expect( 
wrapper .contains( <th>Items</th>) 
) .toBe(true); 
}); 








contains( ) 函数 接收 一 个 ReactElement 作为 参数 ， 在 本 例 中 ，JSX 表示 一 个 HTML 元 素 。 它 返 
回 一 个 布尔 值 ， 表 示 泻 染 的 组 件 是 否 包 含 该 HTML。 

3. 试 试看 

编写 好 第 一 个 Enzyme 用 例 后 ， 我 们 验证 一 下 它 能 否 正常 工作 。 保 存 App.test .js， 从 控制 台中 
运行 测试 命令 ( 见 图 8-10 ): 


$ npm test 








BRS src/App.test.js 
App 
should have the ‘th "Items" (24ms) 


Test Summa 
>» Ran all tests. 
(1 totatL in 1 test suite，run time 3.597s) 


Met Usage 
Press p to filter by a filename regex pattern. 


> Ss 
» Press Enter to trigger a test run. 




















图 8-10 “Enzyme 用 例 测试 通过 


让 我 们 编写 更 多 的 断言 ， 并 在 此 过 程 中 探索 Enzyme 的 API。 
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我 们 在 测试 文件 的 顶部 导入 了 React ， 但 没有 在 文件 中 的 任何 地 方 引用 React， 那 
为 什么 还 需要 它 ? 

可 以 尝试 删除 这 个 import 语句 ， 然 后 看 看 会 发 生 什 么 。 我 们 会 得 到 以 下 错误 : 
ReferenceError: React is not defined 


我 们 无 法 轻易 看 到 对 React 的 引用 , 但 它 是 存在 的 。 我 们 在 测试 套件 中 使 用 了 JSX。 
当 我 们 用 <th>Items</th> 指 定 一 个 th 组 件 时 ， 它 会 编译 成 以 下 内 容 : 


React .createElement('th', null, 'Items'); 


8.5.4” ”App 组件 的 更 多 断言 
接 下 来 , 我 们 断言 该 组 件 包含 一 个 button 元 素 ， 且 该 按钮 会 显示 “Additem” 文 本 。 可 以 这 样 做 : 


wrapper.contains( <button>Add Item</button>) 


但 是 ，contains( ) 函数 会 匹配 元 素 上 的 所 有 属性 。render( ) 函数 里 面 的 button 元 素 如 下 所 示 : 


testing/react-basics/Src/App.js 

















<button 
className='ui button’ 
type='submit" 
disabled={submitDisabled} 
> 
Add item 
</button> 

















需要 给 contains( ) 函数 传递 一 个 具有 完全 相同 的 属性 集 的 ReactElement ， 但 通常 这 是 多 余 的 。 
对 于 这 个 用 例 ， 只 需 断 言 按钮 在 页 面 上 就 足够 了 。 

可 以 使 用 Enzyme 的 containsMatchingElement() 方 法 。 它 会 检查 组 件 的 输出 中 是 否 有 与 预期 元 
素 类 似 的 内 容 。 因 此 我 们 不 必 逐 一 匹配 属性 。 

下 面 使 用 containsMatchingElement() 方 法 断言 泻 染 的 组 件 也 包含 一 个 button 元 素 ， 并 把 这 个 
用 例 写 在 最 后 一 个 用 例 下 方 : 


testing/react-basics/src/complete/App.test.complete-2.js 

































































it('should have a ‘button. element', () => { 
const wrapper = shallow( 
<App /> 
); 
expect( 
wrapper .containsMatchingElement( 
<button>Add item</button> 


) .toBe(true ) ; 
}); 














containsMatchingElement() 消 数 允 许 我 们 编写 一 个 “更 宽松 ”的 用 例 ， 这 也 更 接近 于 我 们 想 要 
的 断言 : 页 面 上 有 一 个 按钮 。 它 不 会 将 规格 与 className 之 类 的 样式 属性 绑 定 在 一 起 。 因 为 onClick 
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和 disabled 属性 也 很 重要 ， 所 以 稍 后 将 编写 用 例 来 介绍 这 
下 面 用 containsMatchingElement( ) 阴 数 编写 男 Pe 即 上 断言 input 字段 也 存在 。 


testing/react-basics/src/complete/App.test.complete-2.js 














it('should have an ‘input. element', () => { 
const wrapper = shallow( 
<App /> 


expect( 
wrapper .containsMatchingElement( 
<input /> 
) 
) .toBe(true ) ; 
}); 





此 时 ， 用例 断 言 在 初始 泻 染 后 组 件 的 输出 中 存在 某 些 关 键 元 素 。 你 很 快 就 会 明白 ,我 们 正在 为 剩 
下 的 用 例 葛 定 基础 。 后 续 的 用 例 将 断言 我 们 修改 组 件 后 发 生 的 事情 ， 比 如 填充 输入 或 点 击 按钮 。 这 些 
基本 用 例 用 于 断言 我 们 将 与 之 交互 的 元 素 一 开始 就 出 现在 页 面 上 。 


在 这 个 初始 状态 中 ,我 们 应 该 做 一 个 更 重要 的 断言 : 页 面 上 的 按钮 是 禁用 的 状态 。 只 有 在 输入 
段 中 有 文本 时 才 应 该 启用 按钮 。 


实际 上 可 以 修改 之 前 的 用 例 来 包含 这 个 特殊 的 属性 





























多 像 这 样 : 


人 


expect( 
wrapper .containsMatchingElement( 
<button disabled={true}> 
Add item 
</button> 
) 
) .toBe(true); 


然后 ， 该 用 例 将 做 出 两 个 断言 : button 元 素 是 存在 的 ; 按钮 是 禁用 的 。 


这 是 一 个 非常 有 效 的 方法 。 然 而 ,我 们 和 希望 将 这 两 个 断言 拆 分 为 两 个 不 同 的 用 例 。 当 我 们 在 给 定 
的 用 例 中 限制 断言 的 范围 时 ， 测 试 失败 则 会 更 有 表现 力 。 如 果 这 个 双重 断言 用 例 失 败 了 ， 原 因 就 会 不 
明显 ， 是 按钮 丢失 了 还 是 按钮 没有 被 禁用 ? 
者 关于 如 何 限制 每 个 用 例 的 断言 的 讨论 涉及 单元 测试 的 艺术 。 编 写 单元 测试 的 策略 和 
风格 有 很 多 ， 这 很 大 程度 上 取决 于 你 使 用 的 代码 库 。 通 常 构 建 一 个 测试 套件 的 “ 正 
确 方 法 ”不 止 一 种 。 
这 一 章 将 展示 特定 的 风格 。 但 当 你 熟悉 了 单元 测试 后 ， 随 时 可 以 尝试 寻找 最 适合 你 
或 者 你 的 代码 库 的 风格 ， 只 要 确保 你 的 风格 是 一 致 的 即 可 。 
到 目前 为 止 , 我 们 的 三 个 用 例 都 已 断言 组 件 的 输出 中 存在 元 素 。 这 个 用 例 是 不 同 的 ， 我们 会 首先 
“查找 ”组 件 ， 然 后 对 其 disabled 属性 进行 断言 。 我 们 先 看 一 下 它 ， 然 后 再 进行 分 解 : 


testing/react-basics/src/complete/App.test.complete-2.js 












































it('“button. should be disabled', () => { 
const wrapper = shallow( 
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<App /> 
3 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 
) .toBe(true ) ; 
5 








find( ) 是 男 一 个 EnzymeWrapper 方法 。 它 需要 一 个 Enzyme 选择 器 作为 参数 。 本 例 中 的 选择 器 是 
一 个 CSS 选择 器 ， 即 'button' 。CSS 选择 器 只 是 Enzyme 选择 器 支持 的 一 种 类 型 。 本 章 只 使 用 CSS 
选择 器 ,但 要 知道 Enzyme 选择 器 也 可 以 直接 引用 React 组 件 。 关 于 Enzyme 选择 器 的 更 多 信息 ， 请 参 
考 Enzyme 文档 “Enzyme Selectors”。 

find( ) 方 法 返回 了 男 一 个 Enzyme 的 ShallowWrapper 对 象 。 该 对 象 包含 所 有 匹配 的 元 素 列表 。 
它 的 行为 有 点 像 一 个 数组 ， 拥 有 类 似 length 的 方法 。 该 对 象 有 一 个 first( ) 方 法 ， 这 里 我 们 使 用 它 
来 返回 第 一 个 匹配 的 元 素 。first() 方 法 还 会 返回 另 一 个 引用 button 元 素 的 ShallowWrapper 对 象 。 

当 你 在 一 个 浅 泻 染 组 件 中 查找 并 选择 各 种 元 素 时 ， 所 有 的 这 些 元 素 都 是 Enzyme 的 
Shallowwrapper 对 和 象 。 这 意味 着 无 论 你 使 用 的 是 浅 泻 染 的 React 组 件 还 是 div 标签 , 都 可 以 使 用 相同 
方法 的 API。 

为 了 读 取 按 钮 上 的 disabled 属性 , 我 们 使 用 了 props( ) 方 法 。props( ) 方 法 返回 一 个 对 象 , 该 对 
象 指定 了 HTML 元 素 上 的 属性 或 React 组件 上 的 属性 集 。 




























































































@ CSS 选择 器 
CSS 文件 使 用 选择 器 来 指定 引用 了 一 组 样式 的 HTML 元 素 。JavaScript 应 用 程序 同 
样 也 使 用 这 种 语法 来 选择 页 面 上 的 HTML 元 素 。 请 查看 MDN 文档 “CSS Selectors” 
以 了 解 更 多 有 关 CSS 选择 器 的 信息 。 


8.5.5 ”使 用 beforeEach 

此 时 ,测试 套件 具有 一 些 重复 的 代码 。 我 们 会 在 每 个 断言 之 前 浅 演 染 组 件 ， 这 意味 着 重 构 的 时 机 
已 成 熟 了 。 

可 以 只 在 describe 块 的 顶部 浅 泻 染 组件 。 


describe('the "App" component', () => { 
const wrapper = shallow( 
<App /> 














); 
// 此 处 是 用 例 ……… 
}) 


由 于 JavaScript 的 作用 域 规则 ，wrapper 在 每 个 让 块 中 都 是 可 用 的 。 

但 这 种 方法 也 会 产生 一 些 问题 。 如 果 某 个 用 例 修改 了 组 件 该 怎么 办 ”可 以 修改 组 件 的 状态 或 模拟 
事件 ， 这 将 导致 用 例 之 间 的 状态 泄漏 。 在 下 一 个 用 例 开始 时 ， 组 件 的 状态 是 不 可 预测 的 。 

相反 , 最 好 在 每 个 用 例 之 间 重 新 泻 染 组 件 ， 以 确保 每 个 用 例 都 在 可 预测 的 新 状态 下 与 组 件 一 起 工作 。 








川 f 
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月 于 帮助 进行 测试 设置 的 图 数 : beforeEach。 


匡 架 中 ， 都 有 一 个 
beforeEach 是 在 每 个 it 块 之 前 运行 的 代码 块 。 可 以 使 用 这 个 函数 在 每 个 用 例 之 前 演 染 组 件 。 
行 断 言 。 除 














在 所 有 流行 的 JavaScript 测试 
在 编写 测试 时 ， 经 常 需要 执行 一 些 设置 来 获取 环境 ， 以 便 将 其 放 人 适当 的 上 下 文中 进行 
EF 浅 泻 染 组 件 外 ， 我 们 很 快 还 会 编写 需要 更 丰富 的 上 下 文 的 测试 。 通 过 在 beforeEach 中 









































了 像 上 面 那 相 
设置 上 下 文 ， 可 以 保证 每 个 用 例 都 会 收 到 一 组 新 的 上 下 文 。 
用 在 每 个 用 例 之 前 设置 新 的 上 下 文 有 助 于 防止 测试 之 间 的 状态 泄漏 。 
我 们 将 依赖 于 beforeEach 来 
蚁 且 只 包 














在 编写 测试 时 ， 我 们 努力 使 每 个 独立 的 用 例 (it 块 ) 尽 可 能 简洁 。 
建立 上 下 文 ， 比 如 组 件 的 state 或 props， 甚 至 是 类 似 元 素 被 点 击 的 事件 。 因 此 ，it 块 几乎 总 是 只 











含 断 言 。 


testing/react-basics/src/complete/App.test.complete-3.js 
describe('App', () => { 


let wrapper; 


使 用 beforeEach 块 来 泻 染 组 件 ， 然后 就 可 以 从 每 个 断言 中 删除 泻 染 代 码 : 





beforeEach(() => { 
wrapper = shallow( 
<App /> 
7 
上 和 
变量 。 这 是 因为 如 果 我 们 在 beforeEach 





首先 必须 在 describe 块 的 顶部 使 用 let 来 声明 wrapper 
， 如 下 所 示 : 


(= 
分 里 


块 中 声明 wrapper 变量 








pa 
beforeEach(() => { 
const wrapper = shallow( 
<ApP /> 

好 

}) 
es 
wrapper 将 不 在 所 有 用 例 的 作用 域内 。 通过 在 describe 块 的 顶部 声明 wrapper, 可 以 确保 它 在 所 


有 断言 的 作用 域内 。 
现在 可 以 安全 地 从 每 个 断言 中 删除 wrapper 的 声明 : 


testing/react-basics/src/complete/App.test.complete-3.js 





it('should have the “th. "Items"', () => { 
expect( 
wrapper .contains(<th>Items</th>) 
) .toBe(true ) ; 


}); 


it('should have a ‘button. element', () => { 


expect( 
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wrapper .containsMatchingElement( 
<button>Add itemx</button> 


) .toBe(true ) ; 
Db: 


it('should have an “input. element', () => { 
expect( 
wrapper .containsMatchingElement( 
<input /> 
) 
) .toBe(true); 


}); 


it('“button. should be disabled', () => { 
const button = wrapper.find('button').first(); 
expect 
button.props().disabled 
) .toBe(true ) ; 


] ) ; 














这 样 好 多 了 。 我 们 的 it 块 不 再 设置 上 下 文 ， 且 元 余 代码 已 被 删除 。 





试 试 看 
保存 App.test. js， 并 运行 测试 套件 : 
$ npm test 


四 个 测试 全 部 通过 ， 见 图 8-11。 


Test Summary 
> Ran all tests. 
src/App.test.js 


Test Summary 
>» Ran all tests. 
[C3 


Watch Usage 
》 t 


a filename regex pattern. 

















图 8-11 ”由 个 测试 全 部 通过 


虽然 有 一 定 的 局 限 性 , 但 这 些 用 例 为 下 一 套用 例 葛 定 了 基础 。 到 目前 为 止 , 我 们 通过 断言 初始 泻 
P 某 些 元 素 的 存在 ,来 断言 在 应 用 程序 加 载 时 用 户 将 在 页 面 上 看 到 的 内 容 。 我 们 断言 页 面 上 会 有 一 






































淮 
hm 
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个 表 头 、 一 个 输入 字段 和 一 个 按钮 ; 按钮 应 该 是 禁用 的 。 

在 本 章 的 其 余部 分 ， 我 们 将 使 用 行为 驱动 的 风格 来 驱动 测试 套件 的 开发 。 通 过 这 种 风格 ， 我 们 将 
使 用 beforeEach 设置 一 些 上 下 文 ; 模拟 与 组 件 的 交互 ， 就 像 用 户 在 界面 上 导航 一 样 ; 然后 编写 关于 
组 件 应 该 如 何 表现 的 断言 。 

加 载 应 用 程序 后 ， 假 定 用 户 要 做 的 第 一 件 事 是 填写 输入 字段 。 填 写 完 后 ， 他 们 会 点 击 “Additem” 
按钮 。 然 后 ， 我 们 期 望 新 项 会 保存 到 状态 中 并 在 页 面 上 显示 。 

我 们 将 逐步 介绍 这 些 行为 ， 并 在 每 次 用 户 交 互 之 后 编写 关于 组 件 的 断言 。 

8.5.6 ”模拟 变化 

用 户 可 以 与 应 用 程序 进行 的 第 一 次 交互 是 填写 用 于 添加 新 项 的 输入 字段 。 除 了 浅 泻 染 组 件 外 , 我 
们 希望 在 下 一 组 用 例 之 前 模拟 这 种 行为 。 

虽然 可 以 在 it 块 内 部 执行 这 个 设置 , 但 如 前 所 述 , 最 好 在 beforeEach 块 内 部 执行 尽 可 能 多 的 设 
置 。 这 不 仅 有 助 于 组 织 代码 ， 而 且 可 以 轻松 地 让 多 个 用 例 依 赖 于 相同 的 设置 。 

但 是 ， 无 须 为 其 他 四 个 现 有 的 用 例 进行 这 种 特殊 设置 。 我 们 应 该 做 的 是 在 当前 的 describe 块 中 
声明 男 一 个 describe 块 。describe 块 是 我 们 对 所 有 需要 相同 上 下 文 的 用 例 进 行 “分 组 ”的 手段 : 


describe('App', () => { 
OA 到 目前 为 止 编 写 的 断言 


















































































































































describe('the user populates the input', () => { 
beforeEach(() => { 
/A ee 设置 上 下 文 
}) 




















我 们 为 内 部 describe 编写 的 beforeEach 会 在 外 部 上 下 文中 声明 的 beforeEach 之 后 运行 。 因 此 ， 
在 beforeEach 运行 之 前 ，wrapper 已 被 浅 泻 染 了 。 正 如 预期 ， 此 beforeEach 将 只 对 内 部 describe 
块 中 的 it 块 运行 。 
下 面 是 为 下 一 组 用 例 编写 的 内 部 describe 块 和 beforeEach 设置 : 


testing/react-basics/src/complete/App.test.complete-4.js 



































describe(l'the user populates the input', () => { 
const item = 'Vancouver'; 


beforeEach(() => { 
const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: item } 
}) 
}); 
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首先 在 describe 块 的 顶部 声明 item 变量 。 我 们 很 快 就 会 看 到 , 这 将 使 我 们 能 够 在 月 


N= 二 
变量 。 



































例 中 引用 该 


beforeEach 首先 在 EnzymeWrapper 对 象 上 使 用 find() 方 法 来 获取 输入 。 回 想 一 下 ，find( ) 方 法 








会 返回 男 一 个 Enzymewrapper 对 象 , 在 本 例 中 是 一 个 带 有 单个 子 项 的 列表 ， 即 我 们 的 输入 。 我 们 调用 


first() 方 法 来 获得 与 输入 元 素 对 应 的 Enzymewrapper 对 象 。 



































接着 对 该 输入 使 用 simulate( ) 方 法 。simulate() 方 法 是 我 们 在 组 件 上 模拟 用 户 交互 的 方式 。 该 


方法 接收 两 个 参数 。 








(1) 要 模拟 的 事件 ( 如 'change' 或 'click' )。 这 将 决定 要 使 用 哪个 事件 处 理 程序 ( 如 onChange 


或 onClick )。 
(2) 事件 对 象 ( 可 选 )。 











这 里 为 输入 指定 了 一 个 'change' 事 件 , 然后 传人 所 需 的 事件 对 象 。 请 注意 








， 此 和 寻 


有 件 对 象 看 起 来 与 


React 传 递 onChange 处 理 程序 的 事件 对 象 完全 相同 。 下 面 是 App fo enn 方法 ， 它 期 

















望 接收 一 个 如 下 类 型 的 对 象 : 


testing/react-basics/Src/App.js 





onItemChange = (e) => { 
this.setState({ 
item: e.target.value, 
Ds 
上 











编写 好 这 个 设置 后 ， 下 面 可 以 编写 与 用 户 刚刚 填充 的 输入 字 
两 个 用 例 : 

(1) 更 新 后 的 item 状态 属性 能 匹配 输入 字段 ; 

(2) 按钮 不 再 被 禁用 。 

完整 的 describe 块 如 下 所 示 : 


testing/react-basics/src/complete/App.test.complete-4.js 





和 的 上 下 文 相关 的 上 











日 例 。 





我 们 将 编写 





describe('the user populates the input', () => { 
const item = 'Vancouver'; 


beforeEach(() => { 
const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: item } 
}) 
}); 


it('should update the state property ‘item’', () => { 
expect( 
wrapper .state( ).item 
) .toEqual(item); 
的 : 
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it('should enable ‘button’', () => { 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 
) .toBe( false); 
上 
的 








在 第 一 个 用 例 中 , 使 用 wrapper.state( ) 方 法 来 获取 state 对 象 。 注 意 , 它 是 一 个 函数 ， 而 不 是 
属性 。 记 住 , wrapper 是 一 个 Enzymewrapper 对 象 , 因此 我 们 不 会 直接 与 组 件 交互 。 我 们 使 用 state() 
方法 从 组 件 中 检索 state 属性 。 


在 第 二 个 用 例 中 ， 再 次 使 用 props( ) 方 法 来 读 取 按钮 上 的 disabled 属性 。 
接着 继续 行为 驱动 方法 ， 下 面 假定 组 件 为 图 8-12 所 示 的 状态 。 




















eee 图 React App Xx 人 React 
和 CG © localhost:3000 食 | : 
ltems 

Vancouvel 


Add item 





图 8-12 ”假定 的 组 件 状态 
用 户 已 填写 了 输入 字段 ， 并 可 以 从 此 处 执行 以 下 两 项 操作 ， 因 此 我 们 可 以 为 其 编写 用 例 。 
(1) 用 户 清空 输入 字段 。 
(2) 用 户 点 击 “Add item” 按 钮 。 

8.5.7 ”清空 输入 字段 


当 用 户 清 空 输入 字段 时 ， 我们 希望 该 按钮 再 次 被 禁用 。 可 以 基于 现 有 的 describe 块 ('the user 
populates the input' ) 中 的 上 下 文 构建 ， 并 在 其 中 骨 套 新 的 describe 块 : 


describe('App', () => { 
// 初始 状态 的 断言 
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describe('the user populates the input', () => { 


// …… 填 充 字 段 的 断言 


describe('and then clears the input', () => { 
BB 断言 按钮 再 次 被 禁用 
}); 
}); 
}); 


我 们 将 使 用 beforeEach 方法 来 再 次 模拟 change 
将 编写 一 个 断言 : 按钮 会 再 次 被 禁用 。 


请 记 住 要 在 'the user populates the input' 下 


input' describe 块 如 下 所 示 : 


testing/react-basics/src/complete/App.test.complete-$.js 


























山中 


有 件 ， 这 次 会 将 value 设置 为 空 字符 串 。 我 们 






































而 编写 describe 块 。 完 整 的 'user clears the 























it('should enable >`button `'，() => { 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 

) .toBe(l false); 

}); 


describe('and then clears the input', () => { 
beforeEach(() => { 
const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: '' } 
}) 
中 


it('should disable “button `'，() => { 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 
) .toBe(true); 
}); 
}); 
起 
}); 




















注意 我 们 是 如 何 基 于 现 有 的 上 下 文 构建 的 ， 然 后 通过 应 用 程序 更 深入 地 了 解 工作 流程 。 我 们 将 深 
和 了解 三 层 : 应 用 程序 泻 染 完成 ， 接 着 用 户 填写 输入 字段 ， 然 后 用 户 清空 输入 字段 。 
下 面 可 以 验证 所 有 测试 通过 。 










































































试 试看 
保存 App .test.js 并 运行 该 测试 套件 : 
$ npm test 








可 以 看 到 所 有 的 测试 都 通过 了 ， 见 图 8-13。 

















8.5 使 用 Enzyme 测 试 基 本 的 React 组 件 251 





BSN src/App.test.js 


the user populat 
should updat 


should disable “button” (6ms) 
Test Summary 


>» Ran all tests. 
(7 total in 1 test suite, run time 0.704s) 


Watch Usage 
» Press p to filte i ame regex pattern. 








图 8-13 ”所 有 的 测试 都 通过 
接 下 来 ， 我 们 将 模拟 用 户 提交 表单 。 这 应 该 会 对 应 用 程序 进行 一 些 更 改 ， 我 们 将 为 其 编写 断言 。 
8.5.8 模拟 表单 提交 
在 用 户 提交 表单 后 ， 我 们 希望 应 用 程序 的 状态 见 图 8-14。 








一 | 



























































图 目 国 图 React App X React 
€ GC |© localhost:3000 玄 


ltems 


Vancouver 


图 8-14 “我们 希望 的 应 用 程序 状态 
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我 们 将 断言 : 

(1) 新 项 处 于 状态 中 〈 items ); 
(2) 新 项 在 演 染 后 的 表 中 ; 
(3) 输入 字段 为 空 ; 
(4)“Add item” 按 钮 是 禁用 的 。 

为 了 获得 这 个 上 下 文 , 我 们 将 基于 之 前 用 户 填充 输入 的 上 下 文 过 












































井 行 


过 位 构 


构建 。 因 此 我 们 将 在 'the user 


populates the input ' 中 编写 一 个 describe 块 作为 'and then clears the input' 的 同 级 : 


describe('App', () => { 
YA 初始 状态 的 断言 


describe('the user populates the input', () => { 
A Sa 填充 字段 的 断言 


describe('and then clears the input', () => { 
ee 再 次 断言 按钮 是 disabled 


> 


describe('and then submits the form', () => { 
A ss 即将 到 来 的 断言 
}); 
> 
}); 


beforeEach 会 模拟 表单 提交 。 回 想 一 下 ，addIten 方法 需要 





个 




















对 象 : 


testing/react-basics/Src/App.js 


具有 preventDefault() 方 法 的 








addItem = (e) => { 
e.preventDefault( ); 


this.setState({ 
items: this.state.items.concat( 
this .state.item 
5 
item: 
}); 
}; 


1 
7 











我 们 将 模拟 submit 的 事件 类 型 ， 并 传人 一 个 具有 addItem 方法 所 期 望 的 类 型 的 对 象 。 可 以 将 





preventDefault 设置 为 空 国 数 。 


testing/react-basics/src/complete/App.test.complete-6.js 





describe('and then submits the form', () => { 
beforeEach(() => { 
const form = wrapper.find('form').first(); 
form.simulate('submit', { 
preventDefault: () => {}, 
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}); 
De 








ul 


设置 好 之 后 ， 首 先 断言 新 项 处 于 状态 中 : 


testing/react-basics/src/complete/App.test.complete-6.js 











it('should add the item to state', () => { 
expect( 
wrapper .state( ) .items 
) .toContain(item) ; 


}); 





Jest 附带 了 一 些 用 于 处 理 数组 的 特殊 匹配 絮 。 我 们 使 用 tocontains( ) 匹 配器 来 断言 items 数组 包 


含 item。 


记 住 ,wrapper 是 一 个 内 部 带 有 React 组 件 的 EnzymeWrapper 对 象 ,我 们 使 用 state() 
( 它 是 方法 ， 不 是 属性 ) 来 检索 状态 。 


然后 断言 item 存在 于 表 中 。 有 几 种 方法 可 以 做 到 这 一 点 ， 其 中 之 一 如 下 所 示 : 


testing/react-basics/src/complete/App.test.complete-6.js 





it('should render the item in the table', () => { 
expect( 
wrapper .containsMatchingElement( 
<td>{item}</td> 
) 
) .toBe(true); 
}); 





contains() 方 法 也 适用 于 这 个 用 例 ， 但 我 们 更 倾向 于 使 用 containsMatching- 
@ Element() 方 法 以 防止 测试 过 于 脆弱 。 举 个 例子 ， 如 果 我 们 为 每 个 td 元素 添加 一 个 
class， 那 么 使 用 containsMatchingElement() 方 法 的 用 例 就 不 会 出 问题 。 
接 下 来 断言 输入 字段 已 被 清空 。 可 以 选择 检查 item 状态 属性 或 虚拟 DOM 中 的 实际 输入 字段 。 我 
们 将 选择 后 者 ， 因 为 它 更 加 全 面 : 


testing/react-basics/src/complete/App.test.complete-6.js 





























it('should clear the input field', () => { 
const input = wrapper.find('input').first(); 
expect( 
input .props() .value 
).toEqual(''); 
}); 














最 后 断言 按钮 青 次 被 禁用 : 


testing/react-basics/src/complete/App.test.complete-6.js 








it('should disable “button’', () => { 
const button = wrapper.find('button').first(); 
expect( 
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button.props().disabled 
) .toBe(true); 
}); 





完整 的 'and then submits 七 he form' describe 块 如 下 所 示 : 


testing/react-basics/src/complete/App.test.complete-6.js 





it('should disable ‘button’', () => { 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 
) .toBe(true); 
1 
}); 


describe('and then submits the form', () => { 
beforeEach(() => { 
const form = wrapper.find('form').first(); 
form.simulate('submit', { 
preventDefault: () => {}, 
}); 
}); 


it('should add the item to state', () => { 
expect( 
wrapper .state() .items 
) .toContain(item) ; 
}); 


it('should render the item in the table', () => { 
expect( 
wrapper .containsMatchingElement( 
<td> {item} </td> 


) .toBe(true); 
}); 


it('should clear the input field', () => { 
const input = wrapper.find('input').first(); 
expect( 
input .props().value 

) .toEqual(''); 

中 


it('should disable “button*', () => { 
const button = wrapper.find('button').first(); 
expect( 
button.props().disabled 
) .toBe(true); 
}); 
}); 
下 站 
}); 
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看 来 还 需要 另 一 个 重 构 。 测 试 套件 中 有 很 多 这 样 的 声明 : 


const input = wrapper.find('input').first(); 
const button = wrapper.find('button').first(); 


你 可 能 想 知道 是 否 可 以 在 测试 套件 作用 域 的 顶部 连同 wrapper 一 起 声明 这 些 变量 。 可 以 将 它们 设 
置 在 最 顶层 的 beforeEach 块 中 ， 如 下 所 示 : 


// 这 样 重 构 有 效 吗 
describe('App', () => { 
let wrapper; 
let input; 
let button; 








beforeEach(() => { 
wrapper = shallow( 
<App /> 
); 
const input = wrapper.find('input').first(); 
const button = wrapper.find('button').first(); 


5 
了 人 
二 


然后 ， Se input 和 button， 而 不 必 重 新 声明 它们 。 


然而 ， 如 果 我 们 尝试 这 样 做 ， 就 会 注意 到 有 一 些 测试 失败 。 这 是 因为 在 整个 测试 套件 中 ，input 
和 button 引用 的 是 初始 泻 染 时 的 HTML ss 当 我 们 调用 一 个 simulate( ) 事 件 时 ， 如 下 所 示 : 


input.simulate('change', { 
target: { value: item } 


}); 


























React 组 件 在 底层 重新 泻 染 ， 这 是 我 们 所 期 望 的 。 因 此 ,一 个 全 新 的 虚拟 DOM 对 象 会 被 创建 ， 其 


， 一、 


中 包含 新 的 input 和 button 元 素 。 需 要 执行 find( ) 方 法 来 挑选 新 的 虚拟 DOM 对 象 中 的 那些 元 素 ， 
就 像 上 面 所 做 的 。 














试 试看 
保存 App .test.js 并 运行 测试 套件 : 
$ npm test 


所 有 测试 都 通过 了 ， 见 图 8-15。 
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src/App.test.js 


and 人 submits th 
should add the i 


Test Summary 
”Ran all tests. 


rty ‘newItem (7ms) 


tem to state (llms) 
he item in the table (12ms) 


(9 total in 1 test suite, run time 0.7485) 


Watch Usage 
; Press p to f 





图 8-15 所 有 的 测试 都 通过 了 











可 以 尝试 修改 App 的 各 个 部 分 来 看 测试 套件 捕捉 这 上 


些 失 败 。 


























App 组 件 的 测试 套件 非常 全 面 。 我 们 了 解 了 如 何 使 











| 行为 驱动 的 方法 来 驱动 组 成 一 个 测试 套件 。 








这 种 风格 鼓励 完整 性 。 我 们 基于 现实 的 工作 流 建立 上 下 文 层 次 。 建 立 好 上 下 文 后 ， 就 能 容易 地 断言 组 


件 的 期 望 行为 。 
总 的 来 说 ， 至 此 已 涵盖 了 如 下 内 容 : 

断言 的 基础 ; 

Jest 测试 库 ( 附带 Jasmine 断言 ); 

以 行为 驱动 的 方式 组 织 测 试 代码 ; 

使 用 Enzyme 进行 浅 泻 染 ; 



























































序 中 的 组 件 编写 用 例 。 具 体 来 说 ， 我 们 将 介绍 以 下 内 容 : 
e 当 应 用 程序 有 多 个 组 件 时 会 发 生 什 么 ; 





























使 用 Shallowwrapper 对 象 的 方法 遍历 虚拟 DOM ; 
Jest/Jasmine 匹配 融 用 于 编写 不 同类 型 的 断言 〈 比如 数组 的 tocontain( ) 方 法 )。 


下 一 节 将 进一步 介绍 如 何 编写 带 有 Jest 和 Enzyme 的 React 单元 测试 。 我 们 将 为 大 型 React 应 

















LU 


程 





e@ 当 应 用 程序 依赖 于 对 API 的 Web 请 求 时 会 发 生 什么 ; 


@ Jest 和 Enzyme 的 一 些 附 加 方法 。 


8.6 为 食物 查找 应 用 程序 编写 测试 


上 一 章 设置 了 一 个 由 Webpack 提供 支持 的 食物 查找 




















应 用 程序 ( 见 图 8-16 )。 
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四 目 二 /图 ReactApp 时 





加 


Es GC © localhost:3000 


下 


Selected foods 
Protein Fat 

Description Kcal Carbs (g) 

; 图 @ 
Pork, cured, bacon, unprep 417 12.62 37.19 1.28 
Lettuce, grn leaf, raw 15 1.36 0.11 2.87 
Tomatoes, red, ripe, ckd 18 0.95 0.07 4.01 
Total 450.00 13.00 37.00 7.00 

Q 

Description Kcal Protein(g) Fat(g) Carbs(g) 











图 8-16 食物 查找 应 用 程序 


我 们 将 在 这 个 应 用 程序 的 完整 版 本 中 工作 。 它 位 于 顶级 文件 夹 food-lookup-complete 中 。 要 从 
testing/react-basics 目录 到 达 该 文件 来， 请 运行 以 下 合 邻 : 


$ cd ../../food-lookup-complete 





不 必 完 成 关于 Webpack 的 那 一 章 就 可 以 继续 本 章 了 。 在 编写 用 例 之 前 ， 我 们 会 描述 
这 个 应 用 程序 的 布局 和 FoodSearch 组 件 。 


如 果 服 务 器 和 客户 端 尚未 安装 npm 包 ， 请 同时 为 它们 安装 ， 运 行 命令 如 下 : 


$ npm i 
$ cd client 
$ npm i 
$cd.. 





如 果 你 愿意 ， 可 以 启动 该 应 用 程序 : 


$ npm start 


本 章 将 只 针对 FoodSearch 组 件 编 写 测试 ， 而 不 会 深入 研究 应 用 程序 中 的 其 他 组 件 的 代码 。 只 需 
要 大 体 理解 应 用 程序 是 如 何 分 解 为 组 件 的 就 足够 了 ( 见 图 8-17 )。 
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e App 组 件 : 


@ SelectedFoods 组 件 : 


Selected foods 


Description 


Pork, cured, bacon, unprep 


Lettuce, grn leaf, raw 


Tomatoes, red, ripe, ckd 


Total 


mustard | 


Description 


Mustard, prepared, yellow 
Salad drsng, honey mustard, reg 


Dressing, honey mustard, fat-free 


图 8-17 


应 用 程序 的 父 容器 。 
列 出 所 选 食物 的 表格 。 点 击 一 个 食物 项 就 会 将 它 移 除 。 
e FoodSearch 组 件 : 提供 实时 搜索 字段 的 表格 。 点 击 表格 中 的 食物 项 会 将 














( SelectedFoods 组 件 )。 





如 果 你 已 
下 工作 : 


已 启动 了 应 用 程序 ， 则 需要 将 


$ cd client 


对 于 这 个 





$ ls tests/ 
App.test.js 
SelectedFoods .test .js 
complete/ 


在 完成 编写 FoodSearch 组 件 的 测试 之 后 ， 可 以 随意 阅读 其 他 测试 。 所 有 其 他 的 测试 都 重用 了 与 
测试 FoodSearch 组 件 相 同 的 概念 。 


应 用 程 








Protein 


(g) 


450.00 


Kcal Protein (g) 


60 3.74 


464 0.87 


169 1.07 


序 的 其 他 组 件 的 测试 


SelectedFoods 


Fat 
{g) 


Carbs (g) 
37.19 
0.11 


0.07 


FoodSearch 


Fat(lg) Carbs(g) 
3.16 5.83 
39.30 


1.35 





应 用 程序 如 何 分 解 为 组 件 





其 添加 到 总 计 表 中 








已 经 存在 ; 


其 关闭 ， 然 后 切换 到 client/ 目 录 。 本 章 我 们 只 会 在 该 日 录 


序 ,我 们 没有 将 测试 与 src 中 的 组 件 放 在 一 起 ,而 是 将 它们 放 在 一 个 专门 的 tests 
文件 夹 中 。 在 tests 文件 夹 中 ,我 们 会 看 到 应 用 程 
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在 为 FoodSearch 组 件 编 写 测试 之 前 ,下面 先 来 看 它 是 如 何 工作 的 。 如 果 你 愿意 , 可 以 打开 FoodSearch 
组 件 (src/FoodSearch. js )， 然 后 依照 代码 查看 。 











@ complete 文件 夹 包含 了 本 节 中 编写 的 FoodSearch.test. js 的 每 个 版 本 ,可 供 你 参考 。 


8.6.1 FoodSearch 组 件 
FoodSearch 组 件 有 一 个 搜索 字段 。 当 用 户 输 入 时 , 搜索 字段 下 了 





会 更 新 一 个 匹配 的 食物 表 ( 见 




















图 8-18 )。 
eggnog QA x 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Eggnog 88 4.55 4.09 8.05 


Beverages, eggnog-flavor mix, pdr, prep w/ 


whl milk 95 2.93 2.66 14.2 





图 8-18 ”FoodSearch 组 件 


当 搜 索 字 段 改 变 时 ，FoodSearch 组 件 会 向 应 用 程序 的 API 服务 器 发 出 请 求 。 如 果 用 户 输入 了 字 
符 串 truffle， 那 么 向 服务 器 发 出 的 请 求 如 下 所 示 : 


GET localhost:306001/api/food?q=truffle 


然后 ，API 服务 需 会 返回 匹配 的 食物 项 数组 : 


[ 
{ 
"description": "Pate truffle flavor", 
"kcal": 327, 
"fat_g": 27.12, 
"protein_g": 11.2, 
"carbohydrate_g": 6.3 














"description": "Candies, truffles, prepared-from-recipe", 
"kcal": 510, 

"fat_g": 32.14, 

"protein_g": 6.21, 

"carbohydrate_g": 44.88 


"description": "Candies, m m mars 3 musketeers truffle crisp", 
"kcal": 538, 

"fat_g": 25.86, 

"protein_g": 6.41, 

"carbohydrate_g": 63.15 
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FoodSearch 组 件 用 这 些 项 来 填充 表格 。 
FoodSearch 组 件 有 三 个 状态 。 











foods 
这 是 服务 器 返回 的 所 有 食物 的 数组 ， 它 默认 是 一 个 空 数组 。 
showRemoveIcon 








当 用 户 开始 输入 搜索 字段 时 ， 字 段 旁 边 会 出 现 一 个 x 〈 见 图 8-19 )。 


d>*] 


图 8-19 删除 图 标 


这 个 x 提供 了 一 个 快速 清空 搜索 字段 的 方式 。 当 字段 为 空 时 ,showRemoveIcon 的 值 应 该 为 false。 
填充 字段 后 ，showRemoveIcon 的 值 应 该 为 true。 


























searchValue 


searchValue 是 绑 定 到 受 控 输 入 (搜索 字段 ) 的 状态 。 
8.6.2 ”探索 FoodSearch 组 件 


了 解 了 FoodSearch 组 件 的 行为 和 它 保持 的 状态 之 后 ， 我 们 来 探索 实际 的 代码 。 我 们 将 在 此 处 包 
含 代码 段 ， 不 过 可 以 随时 打开 src/FoodSearch. js 进行 查看 。 
在 组 件 的 项 部 是 导入 语句 : 


food-lookup-complete/client/src/FoodSearch.js 














import React from 'react'; 
import Client from './Client'; 











我 们 还 有 一 个 常量 ， 用 于 定义 要 在 页 面 上 显示 的 最 大 搜索 结果 数 。 我 们 会 在 组 件 内 部 使 用 这 个 





有 


党 


food-lookup-complete/client/src/FoodSearch.js 





const MATCHING_ITEM_LIMIT = 25; 





接着 需要 定义 组 件 。 
下 面 是 三 个 状态 的 state 初始 化 : 


food-lookup-complete/client/src/FoodSearch.js 

















class FoodSearch extends React.Component { 
state = { 
foods: [], 
showRemovelcon: false, 
searchValue: 


3} 


1/ 
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让 我 们 逐步 了 解 组 件 中 render( ) 方 法 内 的 交互 元 素 以 及 每 个 元 素 的 处 理 函 数 。 
1. input 搜索 字段 


FoodSearch 组 件 项 部 的 输入 字段 驱动 搜索 功能 。 当 用 户 修改 输入 字段 时 , 表 主 体会 随 着 搜索 结果 
更 新 。 


该 input 元 素 如 下 所 示 : 


food-lookup-complete/client/src/FoodSearch.js 























<input 
className='prompt" 
type='text" 
placeholder='Search foods...' 
value={this .state.searchValue} 
onChange={this .onSearchChange} 


2 








className 的 目的 是 设置 Semantic UI 样式 ,value 属性 将 这 个 受 控 输 入 与 this .state.searchValue 
值 绑 定 。 
onSearchChange( ) 接 收 一 个 事件 对 象 。 我 们 逐步 查看 代码 ， 该 函数 的 前 半 部 分 如 下 所 示 : 


food-lookup-complete/client/src/FoodSearch.js 




















onSearchChange = (e) => { 
const value = e.target.value; 


this.setState({ 
searchValue: value, 


}); 


if (value === '') { 
this.setState({ 
foods: [], 
showRemovelcon: false, 


下 





我 们 获取 了 事件 对 象 的 value 值 。 接 着 按照 处 理 受 控 输 入 发 生变 化 的 模式 ， 将 状态 中 的 
searchValue 属性 设置 为 这 个 值 。 


如 果 value 为 空 ， 则 将 foods 设置 为 一 个 空 数组 ( 清空 搜索 结果 表 ) 并 将 showRemoveIcon 设置 
为 false ( 隐藏 用 于 清空 搜索 字段 的 “x”)。 

如 果 value 不 为 空 ， 则 需要 以 下 操作 : 

e@ 确保 将 showRemoveIcon 设置 为 true; 

。 使 用 最 新 的 搜索 值 向 服务 器 发 出 调用 以 获得 匹配 的 食物 列表 。 

代码 如 下 所 示 : 
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food-lookup-complete/client/src/FoodSearch.js 





} else { 
this.setState({ 
showRemovelcon: true, 


}); 


Client.search(value, (foods) => { 
this.setState({ 
foods: foods.slice(@, MATCHING_ITEM_LIMIT), 

}) 

上 
} 

}; 











Client 底层 使 用 的 是 Fetch API, Web 请 求 接口 与 第 3 章 中 使 用 的 相同 。cl ient .search( ) 方 法 向 
服务 器 发 出 Web 请 求 ， 然 后 使 用 匹配 的 食物 数组 调用 回调 函数 。 








i 


@ 如 果 你 需要 复习 一 下 使 用 Fetch 驱动 的 客户 端 库 ， 参 见 第 3 章 。 








接 下 来 需要 将 状态 中 的 foods 设置 为 返回 的 食物 列表 , 然后 截断 此 列表 , 使 其 在 MATCHING_ITEM_ 
LIMIT ( 即 25 ) 的 大 小 范围 内 。 
完整 的 onSearchCchange() 函数 如 下 所 示 ; 


food-lookup-complete/client/src/FoodSearch.js 














onSearchChange = (e) => { 
const value = e.target.value; 


this .setState({ 
searchValue: value, 


}); 
if (value === '') { 
this.setState({ 
foods: [], 


showRemovelcon: false, 
上 和 
} else { 
this.setState({ 
showRemovelcon: true, 


}); 


Client.search(value, (foods) => { 
this.setState({ 
foods: foods.slice(@, MATCHING_ITEM_LIMIT), 

7 

}); 
} 

} 
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2. 删除 图 标 
如 我 们 所 见 ， 删 除 图 标 是 搜索 字段 旁边 的 小 x ， 当 字段 被 填充 时 它 将 显示 。 点 击 x 图 标 应 该 清空 
该 搜索 字段 。 


我 们 执行 是 否 在 行内 显示 删除 图 标的 逻辑 。 该 图 标 元 素 有 一 个 onClick 属性 : 


food-lookup-complete/client/src/FoodSearch.js 





this .state.showRemoveIcon ? (人 
《ii 
className='remove icon' 
onClick={this .onRemoveIconClick} 
/> 
) 
} 





onRemoveIconClick( ) 限 数 的 代码 如 下 所 示 : 


food-lookup-complete/client/src/FoodSearch.js 





onRemoveIconClick = () => { 
this.setState({ 
foods: [], 
showRemovelcon: false, 
searchValue: 
下 
ls 


7 











我 们 重 置 了 所 有 状态 ， 包 括 foods。 


Props .onFoodClick 


最 后 一 点 交互 是 关于 每 个 食物 项 。 当 用 户 点 击 食物 项 时 ， 我们 会 将 其 添加 到 界面 上 已 选择 的 食物 
列表 中 : 


food-lookup-complete/client/src/FoodSearch.js 


















































<tbody> 
{ 
this.state. foods.map((food, idx) => ( 
<tr 
key={idx} 
onClick={() => this.props.onFoodClick( food)} 
> 
<td>{food.description}</td> 
<td className='right aligned'> 
{food.kcal} 


‘<td className='right aligned'> 

{food.protein_g} 

</td> 

‘<td className='right aligned'> 
{food. fat_g} 

</td> 
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<td className='right aligned'> 
{food.carbohydrate_g} 


</td> 
</tr> 
)) 
} 
</tbody> 








当 用 户 点 击 食物 项 时 , 我 们 在 底层 调用 了 this.props.onFoodClick()。FoodSearch 组 件 的 父 类 
( 即 App 组 件 ) 指定 了 这 个 属性 函数 ， 该 函数 接收 一 个 完整 的 食物 对 象 作 为 参数 。 

我 们 将 看 到 ， 为 了 编写 FoodSearch 组 件 的 单元 测试 ， 无 须知 道 onFoodClick( ) 属 性 函数 实际 做 
了 什么 ， 只 需 关 心 它 想 要 什么 (一 个 完整 的 食物 对 象 )。 

浅 演 染 可 帮助 实现 这 种 理想 的 隔离 。 虽 然 这 个 应 用 程序 相对 较 小 , 但 对 于 拥有 较 大 代码 库 的 大 型 
团队 来 说 ， 这 些 隔离 优势 是 巨大 的 。 





















































8.7 编写 FoodSearch .test. js 





我 们 已 准备 好 为 FoodSearch 组 件 编写 单元 测试 。 


client/src/tests/FoodSearch.test.js 文件 包含 了 测试 套件 的 脚手架 。 在 其 顶部 是 import 
语句 : 


food-lookup-complete/client/src/tests/FoodSearch.test.js 














import { shallow } from 'enzyme'; 
import React from 'react'; 
import FoodSearch from '../FoodSearch'; 














接 下 来 需要 搭建 测试 套件 。 别 害怕 ， 我 们 会 挨个 把 每 个 describe 块 和 beforeEach 块 都 填 好 。 


food-lookup-complete/client/src/tests/FoodSearch.test.js 





describe('FoodSearch', () => { 
Av 初始 状态 的 用 例 


describe('user populates search field', () => { 
beforeEach(() => { 
A nis 模拟 用 户 在 input 中 输入 "brocce" 


describe('and API returns results', () => { 
beforeEach(() => { 
A a 模拟 API 返回 结果 


describe('then user clicks food item'，() => { 
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beforeEach(() => { 
Sa 模拟 用 户 点 击 食 物 项 


describe(l 'then user types more', () => { 
beforeEach(() => { 
A 模拟 用 户 输入 "x" 


describe('and API returns no results', () => { 


beforeEach(() => { 
A 模拟 API 不 返回 结果 











与 前 一 节 一 样 ， 我 们 将 通过 使 用 beforeEach 执行 设置 来 建立 不 同 的 上 下 文 。 我 们 的 每 个 上 下 文 
都 会 包含 在 describe 块 中 。 
8.7.1 在 初始 状态 中 
第 一 个 用 例 系列 会 涉及 组 从 


个 初始 状态 编写 断言 : 
food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-1.js 
































F 的 初始 状态 。be foreEach 将 简单 地 浅 泻 染 组 件 ， 然 后 我 们 会 基于 这 








describe('FoodSearch', () => { 
let wrapper; 


beforeEach(() => { 
wrapper = shallow( 
<FoodSearch /> 


ue 
的 ; 


与 上 一 节 中 的 第 一 轮 组 件 测 斌 一样, 我们 在 上 面 的 作用 域 中 声明 了 wrapper 。 在 before-Each 块 
中 ,我们 使 用 了 Enzyme 的 shallow( ) 方 法 来 浅 演 染 组 件 。 

下 面 编写 两 个 断言 : 

(1) 删除 图 标 不 在 DOM 中 ; 

(2) 表 中 没有 任何 条 目 。 

对 于 第 一 个 测试 ， 可 以 使 用 多 种 方法 编写 。 下 面 是 其 
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food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-1.js 





it('should not display the remove icon', () => { 
expect( 
wrapper .find(' .remove.icon').1length 
) .toBe(0); 
}); 


























我 们 给 wrapper 的 find( ) 方 法 传递 了 一 个 选择 器 。 如 果 你 还 记得 , 该 删除 图 标 有 两 个 className 
属性 ， 如 下 所 示 : 


food-lookup-complete/client/src/FoodSearch.js 











《ii 
className='remove icon ' 
onClick={this .onRemoveIconClick} 


Fy 








因此 我 们 是 基于 它 的 类 来 选择 的 。find( ) 方 法 返回 一 个 ShallowWrapper 对 象 。 此 对 象 类 似 于 数 
组 ， 包 含 指定 选择 器 的 所 有 匹配 项 的 列表 。 就 像 数 组 一 样 ， 它 拥有 length 属性 且 我 们 断言 此 属性 值 
应 该 为 6。 
也 可 以 使 用 其 中 一 个 包含 方法 ， 如 下 所 示 : 
it('should not display the remove icon', () => { 
expect( 


wrapper .containsAnyMatchingElements( 
<i className='remove icon' /> 


) 
) .toBe( false); 


下 多 

在 本 章 的 其 余部 分 ， 我 们 将 主要 使 用 find( ) 方 法 来 进行 测试 ， 因 为 我 们 喜欢 使 用 CSS 选择 器 语 
但 这 只 是 个 人 喜好 的 问题 。 

接 下 来 将 断言 在 这 个 初始 状态 下 ， 表 格 中 没有 任何 条 目 。 

对 于 这 个 用 例 ， 可 以 断言 这 个 组 件 没有 在 tbody 内 输出 任何 tr 元 素 ， 如 下 所 示 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-1.js 


































































































it('should display zero rows', () => { 
expect( 

wrapper .find('tbody tr').1length 

.toEqual(0); 

}); 

















如 果 现 在 运行 这 个 测试 套件 ， 那 么 两 个 用 例 都 会 通过 。 
然而 ， 这 并 不 能 保证 用 例 是 正确 的 。 当 断言 DOM 中 不 存在 某 个 元 素 时 ， 我 们 如 果 没 有 正确 地 
选择 该 元 素 ， 就 会 面临 错误 。 当 我 们 使 用 完全 相同 的 选择 器 来 断言 元 素 存在 时 ， 就 会 很 快 解决 这 个 


问题 0 
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© 断言 应 该 有 多 全 面 

上 一 节 围 绕组 件 的 初始 输出 中 存在 关键 元 素 而 编写 了 断言 。 我 们 断言 输入 字段 和 按 
钮 已 存在 ， 为 稍 后 与 它们 交互 商定 了 基础 。 
本 节 将 跳 过 这 类 断言 。 因 为 它们 是 重复 的 ， 所 以 此 处 将 其 省 略 。 但 一 般 来 说 ， 你 或 
你 的 团队 必须 决定 你 们 想 要 的 测试 套件 有 多 全 面 。 这 需要 找到 一 个 平衡 点 ， 因 为 测 
试 套件 可 为 你 的 应 用 程序 开发 提供 服务 。 不 过 也 有 可 能 会 走 极端 ， 那 么 编写 一 个 测 
试 套件 最 终 会 拖 慢 你 的 速度 。 


8.7.2 用户 在 搜索 字段 中 输入 了 一 个 值 

在 行为 驱动 方法 的 指导 下 ， 下 一 步 是 模拟 用 户 交 互 ， 然 后 根据 这 个 新 的 上 下 文 编写 断言 。 

在 加 载 完 FoodSearch 组 件 之 后 ， 用 户 只 能 与 它 进 行 一 种 交互 : 在 搜索 字段 中 输入 一 个 值 。 当 用 
户 执行 此 操作 时 ， 会 有 两 种 可 能 : 

(1) 搜索 匹配 了 数据 库 中 的 食物 ， 且 API 返 回 了 这 些 食物 的 列表 ; 

(2) 搜索 没有 匹配 到 数据 库 的 任何 食物 ， 且 API 返 回 了 一 个 空 数 组 。 

这 个 分 支 发 生 在 onSearchChange( ) 函数 的 底部 ， 即 当 我 们 调用 Client .search( ) 方 法 时 : 


food-lookup-complete/client/src/FoodSearch.js 
























































Client.search(value, (foods) => { 
this.setState({ 
foods: foods.slice(@, MATCHING_ITEM_LIMIT), 
}); 
}); 


























对 于 我 们 的 应 用 程序 , 用 户 每 次 按键 时 都 会 查询 API 并 显示 结果 。 因 此 , 情形 (2) ( 没有 结果 ) 几 
乎 总 是 在 情形 (1) 之 后 发 生 

下 面 将 设置 测试 上 下 文 来 反映 这 个 状态 转换 。 我 们 将 模拟 用 户 在 搜索 框 中 输入 “brocc”， 并 获得 
两 个 结果 ( 两 种 西 兰花 )， 见 图 8-20。 














上 


O 





























brocd Qx 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Broccolini 100 11 5 31 
Broccoli rabe 200 12 22 32 


图 8-20 用户 输入 “brocc” 之 后 ， 组 件 可 能 的 样子 


我 们 将 根据 这 个 上 下 文 编写 断言 。 
接 下 来 将 通过 模拟 用 户 输入 一 个 “x”(“broccx”) 来 构建 这 个 上 下 文 ， 这 将 得 不 到 任何 结果 ， 见 
网 8-21。 
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broccy| Q JIX 


Description Kcal Protein(g) Fat(g) Carbs(g) 





图 8-21 用 户 输入 “broccx” 之 后 ， 组 件 可 能 的 样子 
然后 我 们 将 根据 这 个 上 下 文 编写 断言 。 


不 过 也 有 例外 情况 ,情形 (2) 并 不 总 是 在 情形 (1) 之 后 出 现 。 例如 ， 这 个 用 户 高 估 了 应 
用 程序 的 能 力 ( 见 图 8-22 )。 




















可 Q x 


Description Kcal Protein(g) Fat(lg) Carbs(g) 











图 8-22 ”用户 高 佑 了 应 用 程序 的 能 








然而 ,与 API 返回 空 结果 后 验证 处 于 状态 中 的 foods 仍 为 空 相 比 ， 在 状态 中 的 食物 
向 空 的 状态 转换 则 有 趣 得 多 。 


无 论 client.search( ) 方 法 返回 了 什么 ,我们 都 希望 组 件 在 状态 中 更 新 searchValue 并 显示 删除 
图 标 。 这 些 用 例 将 存在 于 顶部 的 'user populates search field' 中 。 我 们 将 从 这 些 开 始 ， 只 编写 搜 
索 字 段 本 身 的 用 例 ， 然 后 保留 根据 API 返回 内 容 的 断言 供 稍 后 使 用 ( 见 图 8-23 )。 









































brocd Q x 








图 8-23 第 一 组 用 例 集中 在 搜索 字段 
在 编写 完 这 些 用 例 之 后 ,我 们 将 看 到 如 何 为 API 的 返回 结果 建立 上 下 文 。 
首先 在 beforeEach 块 中 模拟 用 户 交 互 ; 然后 在 describe 块 的 顶部 声明 value 变量 ,这样 可 以 
在 稍 后 的 测试 中 引用 它 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-2.js 




















describe( 'user populates search field', () => { 
const value = 'brocc'; 


beforeEach(() 
const input 


> { 
wrapper .find('input').first(); 
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} 


input.simulate('change', { 
target: { value: value }, 

}); 

); 





接 下 来 断言 searchValue 已 在 状态 中 




















新 以 匹配 这 个 新 值 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-2.js 





it('should update state property “searchValue’', () => { 


) 
}); 


xpect( 
wrapper .state( ) .searchValue 
.toEqual(value); 





下 一 步 断言 删除 图 标 存在 于 DOM 中 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-2.js 














it('should display the remove icon', () => { 
expect( 


wrapper .find(' .remove.icon').length 

























































































) .toBe(1); 
DD; 
我 们 使 用 的 选择 器 与 前 面 断 言 删除 图 标 不 在 DOM 上 的 选择 器 相同 。 这 一 点 很 重要 ， 央 为 它 可 以 
确保 前 面 的 断言 是 有 效 的 ， 而 不 是 使 用 了 错误 的 选择 器 。 
我 们 对 'user populates search field' (用 户 填充 搜索 字段 ) 的 断言 已 就 绪 。 在 继续 之 前 ， 先 
保存 并 确保 测试 套件 通过 。 
试 试看 





保存 FoodSearch .test .js 并 在 控制 台 输 入 以 下 命令 : 


# 在 client 文件 夹 中 
$ npm test 


所 有 测试 都 应 该 通过 ( 见 图 8-24 )。 


node 


oodSearch. test.js 
pp.test.js 
electedFoods. test.js 


» Ran all tests. 


(11 total in 3 test suites, run time 2.72 


图 8-24 





测试 通过 
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从 这 里 开始 ， 下 一 层 上 下 文 将 是 API 的 返回 结果 。 

如 果 编 写 集成 测试 ， 一 般 会 采用 两 种 方法 。 如 果 想 要 一 个 完整 的 端 到 端 测试 ， 则 需要 
Client .search( ) 对 API 进行 实际 调用 。 否 则 ， 可 以 使 用 Node 库 来 “伪造 ”HTTP 请求 。 有 很 多 库 可 
以 拦截 JavaScript 发 出 的 HTTP 请求。 可 以 为 这 些 库 提 供 一 个 伪造 的 响应 对 象 来 提供 给 调用 者 。 

然而 ， 在 编写 单元 测试 时 ， 我们 希望 消除 对 Client .search( ) 的 API 和 实现 细节 的 依赖 。 我 们 专 
注 于 测试 FoodSsearch 组 件 ， 它 是 应 用 程序 中 的 一 个 单元 。 我 们 只 关心 FoodSearch 组 件 如 何 使 用 
Client.search() ， 而 无 须 关 心 更 深入 的 内 容 。 

因此 ,我 们 希望 在 表层 拦截 对 Cl ient .search( ) 的 调用 , 一 点 也 不 想 让 Client 牵扯 进来 。 相 反 ， 
我 们 只 希望 断言 Client .search( ) 是 使 用 适当 的 参数 ( 搜索 字段 的 值 ) 调用 的 ， 然 后 使 用 自己 的 结果 
集 作 为 回调 函数 的 参数 传递 给 Client .search()。 


因此 要 做 的 就 是 模拟 client 库 。 


8.7.3 ”使 用 Jest 模 拟 


在 编写 单元 测试 时 ,我们 经 常会 发 现 测试 的 模块 依赖 于 应 用 程序 中 的 其 他 模块 。 有 多 种 方法 可 以 
解决 这 个 问题 , 但 是 它们 主要 围绕 测试 替身 ( Test double )。 测 试 蔡 身 是 假设 的 对 象 ， 用 来 “代替 ” 真 
实 的 对 象 。 

例如 ， 可 以 编写 一 个 伪造 client 库 的 版 本 ， 以 便 在 测试 中 使 用 。 最 简单 的 版 本 如 下 所 示 : 

const Client = { 


search: () => {}, 


拉 
二 一 


可 以 “注入 ”这 个 伪造 的 client 版 本 ,而 不 是 使 用 真正 的 Client 库 到 FoodSearch 组 件 中 进行 
测试 。FoodSearch 组 件 可 以 在 任何 需要 的 地 方 调用 Client .search( ) 方 法 。 它 将 调用 一 个 空 函 数 ， 
而 不 会 执行 一 个 HTTP 请 求 。 

可 以 更 进一步 , 注入 一 个 总 是 返回 特定 结果 的 假 client 。 这 将 被 证 明 是 更 有 用 的 ， 因 为 我 们 能 
基于 Client 的 行为 断言 FoodSearch 组 件 状 态 更 新 : 


const Client = { 
search: (_, cb) => { 
const result = [ 
{ 
description: "Hummus '， 
kcal: '166', 
protein_g: '8', 
fat_g: '10 '， 
carbohydrate_g: '14', 
把 
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cb(result); 
}, 

}y 
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这 个 测试 替身 实现 了 search( ) 方 法 ， 该 方法 立即 调用 作为 第 二 个 参数 传人 的 回调 函数 ， 并 通过 

一 个 食物 对 象 的 便 编 码 数组 来 调用 该 回调 函数 。 

测试 蔡 身 的 实现 细节 无 关 紧要 。 重 要 的 是 这 个 测试 蔡 身 会 模拟 API， 每 次 都 返回 相同 的 且 只 有 一 
个 条 目的 结果 集 。 通 过 在 应 用 程序 中 搬入 这 个 假 客 户 端 ， 我 们 可 以 很 容易 地 写 出 FoodSearch 组 件 处 
理 这 种 “响应 ”的 断言 : 即 断 言 现 在 表 中 有 一 个 条 目 ， 且 该 条 目的 描述 是 “Hummus” 等 。 


使 用 _ 作 为 search() 函 数 的 第 一 个 参数 表示 我 们 “不 关心 ”这 个 参数 。 这 纯粹 是 风 
格 上 的 选择 。 


如 果 测 试 替 身 允 许 我 们 动态 地 指定 要 使 用 的 结果 , 那 就 更 好 了 。 这 样 就 不 需要 定义 一 个 完全 不 同 
的 替身 来 测试 如 果 API 不 返回 任何 结果 会 发 生 什么 。 此 外 ,上 面 的 简单 测试 蔡 身 并 不 关心 传递 给 它 的 
搜索 项 ,但 最 好 确保 FoodSearch 组 件 会 使 用 适当 的 值 (输入 字段 的 值 ) 调用 Client .search( ) 方 法 。 

Jest 附带 了 一 个 生成 器 ， 可 提供 用 于 测试 替身 的 强大 的 功能 : 模拟 。 我 们 将 使 用 Jest 的 模拟 作为 
测试 替身 。 理 解 模拟 的 最 好 方法 是 在 实战 中 进行 查看 。 

我 们 将 生成 一 个 Jest 模拟 : 


const myMockFunction = jest.fn(); 


这 个 模拟 函数 可 以 像 其 他 函数 一 样 调用 。 默 认 情 况 下 ， 它 没有 返回 值 : 


console.1og(myMockFunction()); // 未 定义 


当 我 们 调用 普通 的 模拟 函数 时 ， 似 乎 什么 都 不 会 发 生 。 然 而 ， 这 个 函数 的 特殊 之 处 在 于 它 会 跟踪 
调用 。Jest 的 模拟 函数 有 一 些 方法 ， 我 们 可 以 使 用 它们 来 分 析 所 发 生 的 事情 。 
例如 ， 可 以 询问 一 个 模拟 函数 被 调用 了 多 少 次 


const myMock = jest. fn(); 
console.10og(myMock .mock.calls.1ength); 
// -> 0 

myMock( 'Paris' ); 
console.log(myMock.mock.calls.1length); 




















































































































XY = 六 

myMock('Paris', 'Amsterdam'); 
console.1l0og(myMock .mock.calls.1ength); 
// -> 2 


模拟 的 所 有 内 省 方法 都 位 于 mock 属性 里 。 通 过 调用 myMock .mock .calls ,我 们 得 到 了 一 个 元 素 
为 数组 的 数组 。 数 组 中 的 每 个 条 目 对 应 于 每 次 调用 的 参数 : 


const myMock = jest. fn(); 
console.1lo0g(myMock .mock .calls); 

// -> [] 

myMock( 'Paris' ); 
console.10og(myMock .mock .calls); 

27/ 下 Paris | 

myMock('Paris', 'Amsterdam' ) ; 
console.10g(myMock .mock .calls); 

// -> [ [ 'Paris' ], [ 'Paris', 'Amsterdam' ] |] 
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这 个 简单 的 特性 释放 了 大 量 能 
替身 : 


const Client = { 
search: jest.fn(), 


此 

但 Jest 可 帮 我 们 解决 这 个 问题 ， 它 有 一 个 用 于 整个 模块 的 模拟 生成 器 ， 可 以 通过 调用 如 下 方法 
实现 : 

jest.mock('../src/Client') 

Jest 会 查看 Client 模块 , 并 注意 到 它 导 出 了 一 个 带 有 search( ) 方 法 的 对 象 ; 然后 创建 伪 对 象 ( 即 
测试 蔡 身 )， 该 对 象 具有 一 个 search() 方 法 ( 它 是 模拟 函数 ); 接着 确保 在 应 用 程序 中 的 任何 地 方 都 
使 用 伪 cl ient ， 而 不 会 使 用 真实 的 Client。 


, 我 们 很 快 就 会 看 到 。 可 以 使 用 Jest 模 拟 函 数 来 声明 自己 的 Client 


Hal 
















































































8.7.4 模拟 Client 

我 们 使 用 jest .mock( ) 来 模拟 client。 通 过 使 用 模拟 函数 的 特殊 属性 ,我 们 将 能 够 编写 一 个 断言 ， 
表明 search( ) 方 法 是 用 适当 的 参数 调用 的 。 

在 FoodSearch .test.js 的 顶部 ， 导 和 FoodSearch 语句 的 下 方 导 入 client ， 稍 后 会 在 测试 套件 
中 引用 它 。 此 外 ， 需 要 告诉 Jest 要 对 其 进行 模拟 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-3.js 



























































import FoodSearch from '../FoodSearch'; 
import Client from '../Client'; 


jest.mock('../Client'); 


describe('FoodSearch', () => { 














下 面 考虑 会 发 生 什 么 。 当 我 们 模拟 更 改 事件 时 ，beforeEach 块 如 下 所 示 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-3.js 














beforeEach(() => { 
const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: value }, 

}); 

3 























在 onSearchChange( ) 方 法 底部 ， 这 将 触发 对 Client .search( ) 方 法 的 调用 : 


food-lookup-complete/client/src/FoodSearch.js 





Client.search(value, (foods) => { 
this.setState({ 
foods: foods.slice(@, MATCHING_ITEM_LIMIT), 
}); 
}); 





8.7 ”编写 FoodSearch.test.js 273 














只 是 它 调 用 的 不 是 真实 的 Client 上 的 方法 , 而 是 调用 了 Jest 注入 的 模拟 方法 ,Client. search() 
是 一 个 模拟 也 数 ， 它 只 记录 调用 的 日 志 。 

我 们 在 'should display the remove icon' 下 面 声明 一 个 新 用 例 。 在 编写 断言 之 前 ， 我 们 先 记 
录 一 些 内 容 到 控制 台 ， 并 查看 发 生 了 什么 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-3.js 



































it('should display the remove icon', () => { 
expect( 
wrapper .find(' .remove.icon').length 
) .toBe(1); 
}); 


it('...todo...', () => { 
const firstInvocation = Client.search.mock.calls[0] ; 
console.log('First invocation:'); 
console.log(firstInvocation); 
console.log('All invocations: '); 
console.log(Client.search.mock.calls); 


}); 


describe('and API returns results', () => { 











我 们 读 取 了 模拟 函数 的 mock .calls 属性 。calls 数组 中 的 每 个 条 目 都 对 应 于 一 次 Client .search() 
模拟 函数 的 调用 。 

如 果 我 们 保存 了 FoodSearch .test .js 并 运行 测试 套件 , 就 可 以 在 控制 台中 看 到 图 8-25 中 的 日 志 
语句 。 
































npm 


BSN tests/FoodSearch.test.js 
® Console 


[| 也 
['brocc'!，[Function] ] 
[“'brocc'，[Function] ] 


LectedFoods .test.js 
:日 
Test Summary 
>» Ran all tests. 
) (12 total in 3 test suites, run time 1.59 
4s 





图 8-25 测试 运行 时 的 日 志 语 句 








从 日 志 中 挑选 出 第 一 个 : 


First invocation: 
[ 'brocc', [Function] ] 


人 -总 - 
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该 模拟 捕获 了 在 beforeEach 块 中 发 生 的 调用 。 


第 一 





调用 的 第 一 个 参数 是 我 们 所 期 望 的 'brocc ' 。 























个 参数 是 回调 函数 。 重 要 的 是 ， 回 调 函 数 还 没有 被 调用 。 


未 执行 任何 操作 。 
如 果 要 使 用 
/ "隔离 "C 


console.1og('Before 
Client.search(value, 



































console.1o0g( ) 语 句 来 隔离 对 Client .search( ) 的 调 


ient .search( ) 的 例子 
“search()*'); 
(foods) => { 








不 过 


search( ) 方 法 已 捕获 了 该 函数 ， 但 还 








用 ， 如 下 所 示 : 








console.log('Inside the callback'); 


this.setState({ 
foods : 
] ) 
二 


console.1log('After 


foods.slice(@, MATCHING_ITEM_LIMIT), 


“search()*'); 


当 测 试 套件 运行 时 ， 我 们 会 在 控制 台中 看 到 这 样 的 输出 : 


“search(). 
“search(). 


Before 
After 


search( ) 模 拟 孔 数 已 被 调用 ， 





还 未 被 调用 


因此 ， 控 和 
人 台 输 出 的 'All invocations' 











O 





All invocations : 

[ 'brocc', [Function] 
[ 'brocce', 
[ 'brocc', 


新 格式 化 这 个 数组 : 


[Function] ] 


[Function] 
[Function] 
[Function] 


"broce', 
"broce”. 
"brocc ' ， 


] 
我 们 总 共 看 到 三 个 调用 








央 台 输出 'First invocation' (第 


但 它 所 做 的 只 是 捕获 参数 。 记 录 ' Inside the callback ' 的 代码 行 











用 ) 的 日 志 是 有 意义 的 。 然 而 ， 检 查 一 下 控制 





次 调 
( 所 有 的 调用 ) 日 志 : 














到 


[Function] ]， 


] 


] ， 
], 
] 


这 是 为 什么 呢 ? 








0 





我 们 有 三 个 it 
联 的 it 块 运行 之 前 运行 一 次 。 


模拟 函数 也 会 被 调用 三 次 。 











块 , 分 别 对 应 于 每 个 beforeEach 块 模拟 的 更 改 事件 。 








记 住 ， beforeEach 会 在 每 个 关 
三 次 。 这 意味 着 Client .search() 





三 ?R63 


因此 , beforeEach 块 模拟 的 搜索 被 执行 了 








虽然 这 有 道理 ， 
Client 模拟 的 新 版 本 。 














但 并 不 可 取 ， 因 为 这 会 导致 用 例 之 间 状 态 


泄漏 。 我 们 希望 每 个 it 块 都 能 接收 到 














个 用 例 被 执行 后 使 





用 afterEach 





为 此 ，Jest 模拟 函数 提供 了 一 个 mockClear() 方 法 。 我 们 将 在 每 





( 它 是 beforeEach 的 对 映 方法 ) 调用 此 方法 。 这 可 以 确保 在 每 次 运行 用 例 之 前 模拟 都 处 于 原始 状态 。 























我 们 将 在 顶层 的 describe 块 中 这 样 做 ， 它 位 于 beforeEach 块 下 方 ， 也 是 我 们 浅 演 染 组 件 的 地 方 。 
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food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-4.js 





describe('FoodSearch', () => { 
let wrapper; 


beforeEach(() => { 
wrapper = shallow( 
<FoodSearch /> 
); 
5 


afterEach(() => { 
Client.search.mockClear(); 


}); 


it('should not display the remove icon', () => { 





@ 也 可 以 在 这 里 使 用 beforeEach 块 ， 但 是 在 afterEach 块 中 执行 一 些 “ 整 理 ” 工 作 
通常 更 能 讲 得 通 。 
现在 ， 如 果 再 次 运行 测试 套件 ， 输 出 的 日 志 如 下 所 示 : 


First invocation: 

[ 'brocc', [Function] ] 

All invocations: 

[ [ 'brocc', [Function] ] ] 


我 们 已 成 功 地 在 测试 运行 之 间 对 模拟 进行 了 重 置 。 因此 只 有 一 个 调用 被 记录 下 来 , 即 最 后 一 个 it 
块 执行 之 前 所 发 生 的 调用 。 

随 着 模拟 能 按 预 期 的 方式 运行 ， 下 面 将 虚拟 用 例 转 换 为 真实 的 用 例 。 我 们 将 断言 传递 给 
Client .search() 的 第 一 个 参数 与 用 户 在 搜索 字段 中 输入 的 值 相同 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-S.js 









































it('should display the remove icon'，() => { 





expect( 
wrapper .find(' .remove.icon').length 
) .toBe(1); 
}); 
it0 todo, () => { 
eenst firstInveeatien = Client.search.meck-eal ] 








eensele.legC First inhveeaktien: 

eensele.leg(firstInveeatieon),; 

eensele.legCAll inveeatiens:—'); 
Le 


eehsele-_leg(cliept-seareh-meek-ealls): 
Dr 

















it('should call ‘Client.search() with ‘value’', () => { 
const invocationArgs = Client.search.mock.calls[0]; 
expect( 
invocationArgs [0] 
) .toEqual(value); 
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}); 


describe('and API returns results', () => { 





我 们 断言 该 调用 的 第 0 个 参数 的 值 与 value 匹配 ， 在 本 例 中 该 值 是 brocc。 
试 试看 





通过 模拟 Client ， 我 们 可 以 运行 测试 套件 ， 并 能 确保 FoodSearch 组 件 是 完全 隔离 的 。 保 存 


FoodSearch .test .js 并 从 控制 台 运行 测试 套件 : 


$ npm test 




















测试 结果 见 图 8-26。 





node 


s/FoodSearch.test .js 
p.test.js 
electedFoods. test .js 


Test 5 ry 
» Ran all tests. 
(12 total in 3 test suites, run time 2.20 
8s5) 


Watch Usage 
ptof 














图 8-26 ”所 有 用 例 都 通过 

















我 们 使 用 Jest 模拟 函数 来 捕获 和 分 析 Cl ient .search( ) 的 调用 。 下 面 来 看 如 何 使 用 它 来 建立 下 一 














层 上 下 文 的 行为 ， 即 当 API 返 回 结果 时 。 
8.7.5 API 返回 的 结果 











如 我 们 在 现 有 的 测试 框架 中 所 见 ， 我 们 将 编写 与 这 个 上 下 文 相关 的 用 例 ， 且 




















describe 块 中 ， 如 下 所 示 : 


describe('FoodSearch', () => { 


pA 


describe('user populates search field', () => { 


A 


describe('and API returns results', () => { 
beforeEach(() => { 
A es 模拟 API 返回 的 结果 





[在 他 们 自己 的 
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describe( 'then user types more', () => { 


Vs 


}); 
}); 
}); 


在 这 个 describe 块 的 beforeEach 中 ， 我 们 希望 模拟 API 返回 的 结果 。 可 以 通过 手动 调用 传递 
给 client.search() 的 回调 函数 来 模拟 。 


假设 Client 会 返回 两 个 匹配 项 , 然后 可 以 把 在 此 状态 下 FoodSearch 组 件 描绘 出 来 ( 见 图 8-27 )。 








brocd Q x 
Description Kcal Protein(g) Fat(g) Carbs(g) 
Broccolini 100 11 21 31 
Broccolirabe 200 12 22 32 








图 8-27 组 件 所 需 状 态 的 可 视 化 表示 
我 们 先 来 看 代码 ， 然 后 再 进行 拆 分 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-6.js 








it('should call ‘Client.search() with ‘value’', () => { 
const invocationArgs = Client.search.mock.calls[0]; 
expect( 
invocationArgs [0] 
) .toEqual(value ) ; 
所 5 


describe('and API returns results', () => { 
const foods = [ 

{ 
description: 'Broccolini', 
kcal: '100 '， 
protein_g: '11'， 
fat_g: '21 '， 
carbohydrate_g: '31 '， 

}, 

{ 
description: 'Broccoli rabe', 
kcal: '200 '， 
protein_g: '12', 
fat_g: '22°', 
carbohydrate_g: '32', 

}, 
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] 
beforeEach(() => { 
const invocationArgs = Client.search.mock.calls[0]; 
const cb = invocationArgs [1] ; 
cb(foods); 
wrapper .update( ); 
}); 























首先 ， 我们 声明 了 一 个 foods 数组 ， 并 使 用 它 作 为 Client .search() 返 回 的 伪 结 果 集 。 
其 次 ,在 beforeEach 中 ， 我 们 获取 了 调用 client .search( ) 的 第 二 个 参数 ， 在 本 例 中 是 回调 函 
数 。 然 后 我 们 使 用 食物 对 象 数 组 来 调用 它 。 通 过 手动 调用 传递 给 模拟 函数 的 回调 函数 ， 我 们 可 以 模拟 
所 需 资源 的 异步 行为 。 

最 后 ， 在 调用 回调 函数 之 后 ， 我 们 调用 了 wrapper .update( ) 方 法 。 这 会 导致 组 件 的 重新 演 染 
当 组 件 被 浅 演 染 时 ,通常 的 重演 染 Hook 将 不 适用 。 因 此 , 在 回调 函数 中 调用 setstate( ) 时 ， 将 不 会 
触发 重新 泻 梁 。 

如 果 是 这 种 情况 ， 你 可 能 想 知 道 为 什么 这 是 我 们 第 一 次 需要 使 用 wrapper .update( ) 方 法 。 实 际 
上 ,在 每 次 调用 simulate( ) 方 法 之 后 ，Enzyme 都 会 自动 调用 update( ) 方 法 。simulate() 方 法 会 调 
用 一 个 事件 处 理 程序 。 在 该 事件 处 理 程序 返回 后 ，Enzyme 会 立即 调用 wrapper .update( ) 方 法 。 
因为 我 们 是 在 事件 处 理 程序 返回 后 的 某 个 时 间 异 步调 用 了 回调 函数 ， 所 以 需要 手动 调用 
wrapper .update( ) 方 法 来 重新 泻 染 组 件 。 

当 RU 通常 的 重 泻 染 Hook 将 不 适用 。 如 果 simulate() 方 法 引发 的 任 
2 何 状态 变化 是 异步 进行 的 ， 则 必须 调用 update( ) 方 法 来 重新 演 染 组 件 。 























-7 































































































本 章 专 门 使 用 了 Enzyme 的 simulate( ) 方 法 来 操作 一 个 组 件 。Enzyme 还 有 另 一 个 
@ 方法 setState()， 你 可 以 在 simulate( ) 调 用 不 可 用 时 使 用 它 。setState() 方 法 在 
被 调用 之 后 也 会 自动 调用 update( ) 方 法 。 


@ 其 实 ， 测 试 中 西 兰花 的 营养 信息 完全 是 假 的 ! 














在 回调 函数 被 调用 后 , 下 面 编写 第 一 个 用 例 。 我 们 将 断言 状态 中 的 foods 属性 与 foods 数组 匹配 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-6.js 

















it('should set the state property ‘foods’', () => { 
expect( 
wrapper .state( ) .foods 
) .toEqual( foods); 
] 





同样 ， 当 需要 从 EnzymeWrapper 对 象 中 读 取 状态 时 ， 我 们 会 使 用 state( ) 方 法 。 
接 下 来 将 断言 表 中 有 两 行内 容 : 
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food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-6.js 





it('should display two rows', () => { 
expect( 
wrapper .find('tbody tr').length 

) .toEqual(2); 

上 





因为 这 个 用 例 与 之 前 的 'should display zero rows ' 用 例 使 用 的 选择 器 相同 ， 所 以 这 就 保证 了 
前 面 的 用 例 使 用 了 正确 的 选择 器 。 

最 后 ， 让 我 们 更 进一步 ,断言 这 两 种 食物 都 打印 在 实际 的 表 中 。 有 很 多 方法 可 以 做 到 这 一 点 。 
为 每 种 食物 的 description 都 是 唯一 的 ， 所 以 我 们 可 以 在 HIML 输出 中 搜索 每 种 食物 的 描述 ， 如 下 
所 示 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-6.js 















































it('should render the description of first food', () => { 
expect( 
wrapper .html() 
) .toContain(foods[0] .description); 


}); 


it('should render the description of second food', () => { 
expect( 
wrapper .html() 
) .toContain(foods[1] .description); 


}); 


describe('then user clicks food item', () => { 














因为 我 们 是 在 查找 一 个 唯一 的 字符 串 ， 所 以 不 需要 使 用 Enzyme 的 选择 吉 API。 我 们 只 需要 使 用 
Enzyme 的 html( ) 方 法 来 生成 组 件 的 HTML 输出 字符 串 。 然 后 ， 我 们 会 使 用 Jest 的 tocontains() 匹 
配器 ， 但 这 次 是 针对 字符 串 而 不 是 数组 。 


i html( ) 也 是 一 个 调试 浅 演 染 组 件 的 好 方法 。 例如 ,查看 组 件 的 完整 HTML 输出 可 以 
帮助 确定 断言 的 问题 是 由 于 错误 的 选择 器 还 是 错误 的 组 件 导 致 的 。 

















名 对 于 这 组 用 例 ， 我 们 处 理 了 从 API 返回 的 两 个 食物 项 ( 随后 会 进入 状态 中 )， 

我 们 的 断言 是 稳健 的 ， 即 使 只 使 用 了 一 个 项 。 但是， 在 编写 针对 数组 的 断言 时 ， 有 
些 开 发 人 员 和 希望 数组 中 有 多 个 项 。 这 可 以 帮助 我 们 捕获 某 些 类 型 的 bug， 并 断言 被 
测试 的 变量 是 正确 的 数据 结构 。 





试 试 看 
保存 FoodSearch .test .js 并 从 控制 台 输 入 以 下 命令 : 
$ npm test 


所 有 测试 都 通过 ， 见 图 8-28。 
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node 


FoodSearch.test.js 
SelectedFoods.test.js 
App.test.js 


Test Summary 
>» Ran all tests. 
(16 total in 3 test suites, run time 2.54 














图 8-28 测试 通过 














从 这 里 开始 ， 用 户 可 以 针对 FoodSearch 组 件 采 取 一 些 行为 : 

点 击 一 个 食物 项 并 添加 到 总 计 表 中 ; 

输入 一 个 额外 的 字符 并 附加 到 搜索 字符 串 之 后 ; 

按 退 格 键 删 除 一 个 字符 或 整个 文本 字符 串 ; 

点 击 “ x”( 删除 图 标 ) 来 清空 搜索 字段 。 

我 们 将 一 起 为 前 两 个 行为 编写 用 例 。 在 本 章 的 末尾 ， 最 后 两 个 行为 将 留 作 练 习 。 
接 下 来 将 从 模拟 用 户 点 击 食物 项 开始 。 


8.7.6 ”用 户 点 击 食 物 项 


当 用 户 点 击 一 个 食物 项 时 ， 该 项 被 添加 到 总 计 表 中 。 总 计 表 则 由 应 用 程序 顶部 的 SelectedFoods 
组 件 显示 ， 见 图 8-29。 












































Selected foods 


Description Kcal Protein(g) Fat(g) Carbs (g) 

Eggnog 88 4.55 4.09 8.05 

Total 88.00 4.00 4.00 8.00 
eggnog QO x 

Description Kcal Protein(g) Fat(g) Carbs(g) 

Eggnog ® 88 4.55 4.09 8.05 


Beverages, eggnog-flavor mix, pdr, prep w/ 
whl milk 


95 2.93 2.66 14.2 


图 8-29 点 击 食物 项 
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你 可 能 还 记得 , 每 个 食物 项 都 显示 在 一 个 tr 元 素 中 , 该 元 素 有 一 个 onClick 人 处理 程 序 。 该 onClick 
处 理 程序 被 设置 为 一 个 属性 函数 ， 由 App 组 件 传递 给 FoodSearch 组 件 


food-lookup-complete/client/src/FoodSearch.js 


<tbody> 
{ 
this.state. foods.map((food, idx) => (人 
<tr 
key={idx} 
onClick={() => this.props.onFoodClick( food)} 
> 








HH 








[e) 








我 们 希望 模拟 点 击 ， 然 后 断言 FoodSearch 组 件 调 用 了 这 个 属性 函数 。 


因为 是 单元 测试 , 所 以 我 们 不 想 让 App 组 件 参与 进来 。 因此 , 可 以 将 onFoodclick 属性 设置 成 一 
个 模拟 函数 。 


目前 在 泻 染 Foodsearch 组 件 时 并 没有 设置 任何 属性 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-6.js 


beforeEach(() => { 
wrapper = shallow( 
<FoodSearch /> 
0 
下 入 








而 





本 






























































首先 把 浅 演 染 调用 的 onFoodclick 属性 设置 成 新 的 模拟 函数 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-7.js 
describe('FoodSearch', () => { 

let wrapper; 

const onFoodClick = jest.fn(); 

















beforeEach(() => { 
wrapper = shallow( 
<FoodSearch 
onFoodClick={onFoodClick} 
/> 








我 们 在 测试 套件 作用 域 的 顶部 声明 了 一 个 模拟 函数 onFoodclick ， 并 将 它 作为 属性 传递 给 
FoodSearch 组 件 。 








TT 








在 进行 此 操作 时 ， 需 要 确保 在 两 次 用 例 运行 之 间 清 除 这 个 新 的 模拟 ， 这 是 一 个 很 好 的 习惯 
food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-7.js 


afterEach(() => { 
Client.search.mockClear(); 
onFoodClick.mockClear(); 
5 
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来 将 设置 'then user clicks food item' describe ， 七 征 'an returns results' 
接 下 来 将 设置 'th licks food item' qd be 块 ， 它 是 'and API ret 1t 
describe 块 的 子 级 。 


describe('FoodSearch', () => { 


A 


describe('user populates search field', () => { 


A/ 


describe('and API returns results', () => { 


A se 


describe('then user clicks food item', () => { 
beforeEach(() => { 
A 模拟 点 击 





beforeEach 块 模拟 点 击 了 表格 中 的 第 一 个 食物 项 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-7.js 





describe('then user clicks food item'，() => { 
beforeEach(() => { 
const foodRow = wrapper.find('tbody tr').first(); 
foodRow.simulate( 'click'); 


人 








首先 使 用 find( ) 方 法 选择 与 tbody tr 匹配 的 第 一 个 元 素 ， 然 后 模拟 在 该 行 上 的 点 击 。 注 意 ， 无 
须 将 事件 对 象 传递 给 simulate( ) 方 法 。 

通过 使 用 模拟 函数 作为 onFoodclick 的 属性 ， 我 们 可 以 使 FoodSearch 组 件 保 持 完 全 隔离 。 对 于 
FoodSearch 组 件 的 单元 测试 ,我们 不 关心 App 组 件 如 何 实现 onFoodclick() 函数 ,只 关心 FoodSearch 
组 件 是 否 在 正确 的 时 间 用 正确 的 参数 来 调用 该 函数 。 

我 们 的 用 例 将 断言 onFoodclick 是 通过 foods 数组 中 的 第 一 个 food 对 象 调用 的 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-7.js 








































































































it('should call prop ‘onFoodClick. with ‘food*', () => { 
const food = foods[0]; 
expect( 
onFoodClick.mock.calls[9] 
) .toEqual([ food ] ); 
}); 





完整 的 describe 块 如 下 所 示 : 
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food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-7.js 





it('should render the description of second food', () => { 
expect( 
wrapper .html() 
).toContain(foods[1] .description); 


}); 


describe('then user clicks food item', () => { 


beforeEach(() => { 
const foodRow = wrapper.find('tbody tr').first(); 


foodRow.simulate('click'); 


}); 


it('should call prop “onFoodClick* with “food*', () => { 
const food = foods[0]:; 
expect( 
onFoodClick.mock.calls[0] 
) .toEqual([ food ] ); 
}); 
}); 


describe(l 'then user types more', () => { 





试 试看 
保存 FoodSearch.test. js 并 运行 该 套件 : 





TT 





$ npm test 


新 用 例 测试 通过 了 ， 见 图 8-30 所 示 。 














npm 


oodSearch.test.js 
/SelectedFoods. test. bE 


> Ran all tests. 
(17 total in 3 test suites, run time 1.69 


s) 


Watch Usage 





图 8-30 ”测试 通过 














完成 了 用 户 点 击 食 品 项 的 用 例 后 ， 我 们 返回 到 'anqd API returns results' 的 上 下 文 。 


zr 














“brocc” 会 看 到 两 个 结果 。 我们 要 模拟 的 下 一 个 行为 是 用 户 在 搜索 字段 中 输入 额外 的 字符 ， 
模拟 的 API 返回 一 个 空 结果 外 




















YI 


o 








j 户 输入 
这 会 导致 
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8.7.7 ” API 返回 空 结果 集 
正如 你 在 脚手架 上 看 到 的 ， 最 后 一 个 describe 块 是 
'then user click food item' 的 同 级 : 


describe('FoodSearch', () => { 
A 


describe('user populates search field', () => { 


ae 


describe('and API returns results', () => { 


LL: wi 








'and API returns results' 的 子 级 , 日 是 


describe('then user clicks food item', () => { 


pa 
}); 


describe('then user types more', () => { 
beforeEach(() => { 
// …… 模 拟 用 户 输入 "x" 


describe('and API returns no results', () 
beforeEach(() => { 
A Sas 模拟 API 返回 空 结果 集 


=> { 


可 以 将 'then user types more' 和 'and API returns no results' 合 并 到 一 个 
describe 块 中 ， 并 使 用 同一 个 beforeEach 块 。 但 我 们 喜欢 以 上 面 这 种 方式 组 织 上 


下 文 设置 ， 这 既是 为 了 可 读 性 ， 也 是 为 了 








如 果 你 感觉 良好 ， 试 着 自己 组 合 这些 describe 块 ， 























在 两 个 beforeEach 块 中 建立 了 上 下 文 之 后 ， 我 们 将 绷 


给 将 来 的 用 例 留 出 空间 。 

















局 写 一 个 断言 : 状态 中 的 foods 属性 现在 是 








然后 回来 验证 你 的 解决 方案 。 











第 一 个 beforeEach 块 首先 模拟 用 户 输 入 “X”， 这 意味 着 事件 对 象 现在 携带 的 值 是 'broccx' : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-8.js 





describe( 'then user types more', () => { 
const value = 'broccx'; 


beforeEach(() => { 
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const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: value }, 
中 
}); 




















我 们 不 会 编写 任何 特定 于 此 describe 的 用 例 。 下 一 个 describe 块 'and API returns no results' 
将 模拟 Client .search( ) 产 生 一 个 空 数 组 : 


describe('and API returns no results', () => { 
beforeEach(() => { 
YY sss 模拟 搜索 返回 空 结果 

1 

)); 


这 里 有 一 个 环 手 的 问题 : 当 到 达 beforeEach 块 时 ， 我们 已 模拟 了 两 次 用 户 更 改 输入 ， 结 果 导 致 
Client .search( ) 被 调用 了 两 次 。 


男 一 种 查看 方式 是 在 此 beforeEach 块 中 为 Client .search.mock.calls 插入 一 条 日 志 语 句 : 
describe('and API returns no results', () => { 
beforeEach(() => { 
// 如 果 我 们 将 模拟 的 calls 数组 记录 下 来 会 发 生 什么 呢 
console.log(Client.search.mock.calls); 
})3 
}); 


我 们 会 在 控制 台中 看 到 它 被 调用 了 两 次 : 
[ 
[ 'brocc', [Function] ]， 


[ 'broccx', [Function] ]， 


] 








这 是 因为 beforeEach 块 用 于 'user populates search field' 和 'then user types more' 模 拟 
更 改 输入 ， 这 反 过 来 最 终 调用 了 Client.search()。 








我 们 希望 调用 传递 给 第 二 次 调用 的 回调 函数 ， 这 对 应 于 用 户 最 近 一 次 对 输入 字段 所 做 的 更 改 。 
此 ， 我 们 将 获取 第 二 次 调用 ， 并 使 用 一 个 空 数组 来 调用 传递 给 它 的 回调 函数 : 
food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-8.js 


describe('and API returns no results', () => { 
beforeEach(() => { 
const secondInvocationArgs = Client.search.mock.calls[1]; 
const cb = secondIinvocationArgs[1]; 
cb( []); 
wrapper .update( ); 
}); 














我 们 不 需要 在 beforeEach 块 中 调用 wrapper .update()， 因 为 没有 对 虚拟 DOM 进行 
任何 断言 。 但 是 , 最 好 在 异步 状态 更 改 之 后 使 用 update( ) 调 用 。 因 为 如 果 将 来 添加 了 
针对 DOM 的 断言 ， 这 样 做 可 以 避免 一 些 可 能 引起 困惑 的 行为 。 
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最 后 ， 用 例 已 准备 就 绪 。 我 们 断言 foods 状态 属性 现在 是 一 个 空 数组 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-8.js 





it('should set the state property ‘foods’', () => { 
expect( 
wrapper .state( ) .foods 

) .toEqual( []); 

}); 





完整 的 'then user types more'describe 块 如 下 所 示 : 


food-lookup-complete/client/src/tests/complete/FoodSearch.test.complete-8.js 





it('should call prop “onFoodClick. with “food*', () => { 
const food = foods[0@]; 
expect( 
onFoodClick.mock.calls[0] 
) .toEqual([ food 1]); 
}); 
1 


describe('then user types more', () => { 
const value = 'broccx'; 


beforeEach(() => { 
const input = wrapper.find('input').first(); 
input.simulate('change', { 
target: { value: value }, 

}); 

}); 


describe('and API returns no results', () => { 
beforeEach(() => { 
const secondInvocationArgs = Client.search.mock.calls[1]; 
const cb = secondInvocationArgs [1] ; 
cb( []); 
wrapper .update( ); 
Ds 


it('should set the state property ‘foods*', () => { 
expect( 
wrapper.state().foods 

) .toEqual([] ); 

}); 





组 件 输出 上 的 断言 ( 比如 它 不 应 该 包含 任何 行 ) 在 这 里 并 不 是 严格 必需 的 。 我 们 对 
@ 初始 状态 的 断言 (比如 'should display zero rows' ) 已 提供 了 保证 ， 当 状态 中 的 
foods 的 值 为 空 时 不 会 演 染 任何 行 。 





@ 你 应 该 还 记得 ， 两 个 回调 函数 如 下 所 示 : 


(foods) => { 
this.setState({ 
foods: foods.slice(@, MATCHING_ITEM_LIMIT), 
}); 
上 


因为 回调 函数 没有 引用 onSearchChange( ) 函数 中 的 任何 变量 ,所 以 在 技术 上 我 们 可 
以 调用 任何 一 个 回调 函数 ， 且 我 们 刚刚 编写 的 用 例会 通过 。 然 而 ,这 是 不 好 的 做 法 ， 
因为 这 样 在 将 来 我 们 可 能 会 陷入 令 人 困惑 的 bug 中 。 


8.8 进一步 阅读 


对 本 章 的 总 结 如 下 所 示 。 

(1) 解密 JavaScript 测试 框架 ， 并 从 头 开 始 构建 

(2) 引入 JavaScript 的 测试 框架 : Jest。 它 给 我 们 提供 了 一 些 实用 的 特性 ， 比 如 expect 和 beforeEach。 

(3) 学 习 如 何以 行为 驱动 的 方式 组 织 代码 。 

(4) 引入 了 Enzyme， 它 是 用 于 在 测试 环境 中 使 用 React 组 件 的 库 。 

(5) 使 用 了 模拟 的 思想 为 向 API 请 求 的 React 组 件 编写 断言 。 

有 了 这 些 知识 ， 我们 就 可 以 在 各 种 不 同 的 上 下 文中 隔离 React 组 件 ， 并 有 效 地 编写 单元 测试 。 随 
着 应 用 程序 中 组 件 的 数量 和 复杂 性 的 增加 ， 这 些 单元 测试 会 使 我 们 更 安心 。 

本 章 之 外 的 一 些 资源 会 大 大 帮助 编写 单元 测试 ， 具 体 如 下 所 示 。 

JestAPI 参考 

这 些 文档 将 帮助 我 们 发 现 丰 富 的 匹配 器 ， 它 们 既 可 以 节省 时 间 ， 又 可 以 提高 测试 套件 的 表现 力 。 
本 章 使 用 了 一 些 实用 的 匹配 器 ， 比 如 toEqual 和 toContain。 更 多 的 例子 如 下 所 示 : 

@ 使 用 toBeCloseTo() 可 以 断言 一 个 数字 与 男 一 个 数字 的 值 接近 ; 

@ 使 用 toMatch() 可 以 将 字符 串 与 正则 表达 式 比 较 ; 

@ 使 用 setTimeout 或 setInterval 可 以 控制 时 间 。 

create-react-app 会 为 你 配置 Jest。 但 如 果 你 在 create-react-app 之 外 使 用 Jest， 则 Jest 配置 参考 也 非 
常 有 用 。 可 以 配置 一 些 设置 ， 比 如 观察 测试 或 告诉 Jest 在 哪里 可 以 找到 测试 文件 。 

Jasmine 文档 

Jest 使 用 Jasmine 进行 断言 ， 因 此 Jasmine 的 文档 也 适用 。 可 以 用 它 作为 另 一 个 参考 点 来 理解 匹 
配 絮 。 

此 外 ， 可 以 使 用 一 些 在 Jest API 参 考 中 没有 提 到 的 附加 功能 。 例 如 : 

e@ 使 用 jasmine.arrayContaining() 断 言 数组 包含 一 个 特定 的 成 员 子 集 ; 

e@ 使 用 jasmine.objectContaining() 上 断言 对 象 包含 一 个 特定 的 键 / 值 对 子 集 。 


[e] 
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Enzyme 的 ShallowWrapper 对 象 API 文档 
我 们 已 探讨 了 一 些 方法 用 于 遍历 虚拟 DOM (使 用 find( ) 方 法 ) 并 对 虚拟 DOM 的 内 容 进 行 断 言 
(例如 使 用 contains() 方 法 )。Shallowwrapper 有 更 多 的 方法 ， 你 可 能 会 发 现 它们 是 有 用 的 ， 例 子 如 
下 所 示 。 
@ 如 本 章 所 述 , Shallowwrapper 类 似 于 数组 。 调 用 find( ) 方 法 可 能 会 匹配 组 件 输出 中 的 多 个 元 
素 。 可 以 对 映射 Array 方 法 (如 map() ) 的 匹配 元 素 列表 执行 操作 。 
@ 可 以 使 用 instance() 方 法 获取 实际 的 React 组 件 ， 并 可 以 使 用 它 对 组 件 上 的 特定 方法 进行 单 
元 测试 。 
@ 可 以 使 用 setState( ) 方 法 设置 底层 组 件 的 状态 。 在 可 能 的 情况 下 , 我 们 喜欢 使 用 simulate() 
或 直接 调用 组 件 的 方法 来 调用 状态 更 改 。 但 当 这 些 不 可 用 时 ，setState( ) 方 法 仍 有 用 。 
之 前 , 我 们 看 到 find( ) 方 法 会 接收 一 个 Enzyme 选择 器 。 此 文档 中 有 一 个 参考 页 面 介 绍 了 有 效 的 
Enzyme 选择 器 的 组 成 ， 你 会 发 现 它 很 有 帮助 。 
端 到 端 测试 


我 们 在 本 书 的 代码 中 使 用 了 端 到 端 测 试 ， 并 使 用 了 Nightwatch. js 工具 来 驱动 。 







































































































































































第 9 章 


路 由 








9.1 URL 中 有 什么 


URL 是 对 Web 资源 的 引用 。 一 个 典型 的 URL 见 图 9-1。 





http://www.example.com/index.html 
| | | 
协议 主机 名 路 径 名 
图 9-1 一 个 典型 的 URL 
协议 ( protocol ) 和 主机 名 ( hostname ) 的 组 合 将 我 们 定向 到 某 个 网 站 ， 路 径 名 ( pathname ) 则 引 
用 了 该 站 点 上 的 特定 资源 。 另 一 种 考虑 方式 : 路 径 名 引用 了 应 用 程序 中 的 特定 位 置 。 9 
例如 某 个 音乐 网 站 的 URL: 


https://example.com/artists/87589/albums/1758221 























这 个 位 置 指 的 是 一 个 艺术 家 的 特定 专辑 。URL 包含 艺术 家 和 专辑 所 需 的 标识 符 : 

example.com/artists/:artist1ld/albums/:albumld 

可 以 将 URL 看 作 状 态 的 外 部 持 有 者 ， 在 本 例 中 是 用 户 正 在 查看 的 专辑 。 通 过 在 浏览 器 的 位 置 级 
别 上 存储 应 用 程序 的 状态 片段 , 可 以 让 用 户 具有 将 链接 添加 到 书签 、 刷 新 页 面 以 及 与 他 人 共享 的 能 力 。 

在 使 用 了 最 少 JavaScript 的 传统 Web 应 用 程序 中 ， 页 面 的 请 求 流 可 能 如 下 所 示 。 

(1) 浏览 器 向 服务 器 发 出 此 页 面 的 请 求 。 

(2) 服务 器 使 用 URL 中 的 标识 符 从 数据 库 中 检索 关于 艺术 家 和 专辑 的 数据 。 

(3) 服务 器 使 用 此 数据 来 填充 模板 。 

(4) 服务 器 返回 这 个 填充 好 的 HTML 文档 以 及 其 他 资源 ， 如 CSS 和 图 像 。 

(5) 浏览 器 泻 染 这 些 资源 。 

当 使 用 像 React 这 样 的 富 JavaScript 框架 时 ， 我 们 希望 React 来 生成 页 面 。 因 此 ， 使 用 React 的 请 
求 流 的 演变 过 程 可 能 如 下 所 示 。 

(D 浏览 器 向 服务 器 发 出 此 页 面 的 请 求 。 













































































290 第 9 章 路 由 





(2) 服务 器 不 关心 路 径 名 。 相 反 ， 它 只 返回 一 个 标准 的 index.html， 其 中 包含 React 应 用 程序 和 
其 他 静态 资源 。 

(3) 挂 载 React 应 用 程序 。 

(4) React 应 用 程序 从 URL 中 提取 标识 符 ， 并 使 用 这 些 标识 符 进行 API 调用 来 获取 艺术 家 和 专辑 
的 数据 。 不 过 它 可 能 会 调用 相同 的 服务 器 。 

(5) React 应 用 程序 使 用 从 API 调用 中 接收 到 的 数据 来 泻 染 页 面 。 

本 书 中 其 他 地 方 的 项 目 是 第 二 个 请 求 流 的 反映 。 例 如 第 3 章 中 的 计时 器 应 用 程序 。server .js 同 
时 为 静态 资源 ( React 应 用 程序 ) 和 提供 React 应 用 程序 数据 的 API 提供 服务 。 

React 的 初始 请 求 流 比 第 一 个 请 求 流 的 效率 略 低 。 因 为 它 不 仅 是 从 浏览 器 到 服务 器 的 一 个 请 求 ， 
而 是 会 有 两 个 或 者 更 多 请 求 : 一 个 来 获取 React 应 用 程序 ， 接 着 不 管 React 应 用 程序 需要 进行 多 少 次 
API 调 用 ， 都 必须 获取 泻 染 页 面 所 需 的 所 有 数据 。 

然而 ， 只 有 在 初始 页 面 加 载 之 后 才能 获得 收益 。 计 时 需 应 用 程序 在 拥有 React 后 的 用 户 体 验 比 没 
有 React 要 好 得 多 。 如 果 没 有 JavaScript， 每 次 用 户 想 要 停止 、 启 动 或 编辑 计时 需 时 ， 浏 览 器 都 必须 从 
服务 器 获取 一 个 全 新 的 页 面 。 这 明显 增加 了 延迟 并 且 在 页 面 加 载 之 间 会 有 令 人 不 快 的 “闪烁 ”。 

单 页 应 用 程序 ( single-page application，SPA ) 是 一 种 Web 应 用 程序 ， 它 只 加 载 一 次 ， 然 后 会 使 用 
JavaScript 动态 更 新 页 面 上 的 元 素 。 到 目前 为 止 ， 我 们 构建 的 每 个 React 应 用 程序 都 是 一 种 SPA。 
因此 ， 我 们 已 了 解 了 如 何 使 用 React 来 使 得 页 面 上 的 界面 元 素 具有 流动 性 和 动态 性 ， 但 本 书 中 的 
其 他 应 用 程序 只 有 一 个 位 置 。 例 如 ,产品 投票 应 用 程序 只 有 一 个 视图 : 要 投票 的 产品 列表 。 如 果 我 们 
想 添 加 一 个 不 同 的 页 面 ， 比 如 在 /prodquctsy/:productId 位 置 上 的 产品 视图 页 面 ， 该 怎么 办 ?该 页 面 
将 使 用 一 组 完全 不 同 的 组 件 。 
回 到 音乐 网 站 示例 , 假设 用 户 正 在 查看 基于 React 的 专辑 视图 页 面 , 然后 点 击 右上 角 的 “Account” 
( 账户 ) 按钮 以 查看 他 们 的 账户 信息 。 支 持 此 功能 的 请 求 流 可 能 如 下 所 示 。 

(1) 用 户 点 击 “Account” 按 钮 ， 该 按钮 将 链接 到 /account 。 

(2) 浏览 器 向 /account 发 出 请 求 。 

(3) 同样 ， 服 务 器 不 关心 路 径 名 ， 它 会 返回 相同 的 index.html ， 其 中 包含 完整 的 React 应 用 程序 和 

(4) 挂 载 React 应 用 程序 。 它 会 检查 URL 并 查看 用 户 是 否 正在 查看 /accounts 页 面 。 

(5) 顶级 的 React 组件 ( 比如 App 组 件 ) 可 能 会 有 一 个 开关 ， 并 根据 URL 切换 到 要 演 染 的 组 件 。 
之 前 它 泻 染 Albumview 组 件 ， 但 现在 泻 染 AccountView 组 件 。 

(6) React 应 用 程序 向 服务 器 发 出 一 个 API 请 求 〈 比如 /api/account ) 来 泻 染 并 填充 页 面 。 

这 种 方法 是 有 效 的 ， 我 们 可 以 在 网 上 看 到 它 的 例子 ， 但 对 于 许多 类 型 的 应 用 程序 来 说 ， 有 一 种 更 
有 效 的 方法 。 

当 用 户 点 击 “Account” 按 钮 时 ， 我 们 可 以 阻止 浏览 器 从 /account 位 置 获取 下 一 页 。 相 反 ， 可 以 
指示 React 应 用 程序 将 Albumview 组 件 切换 为 AccountView 组 件 。 总 的 来 说 ， 该 流程 如 下 所 示 。 

(1) 用 户 访问 https://example.com/artists/87589/albums/1758221。 
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(2) 服务 顺 提 供 标准 的 index.html ， 其 中 包括 React 应 用 程序 和 资源 。 

(3) React 应 用 程序 通过 对 服务 器 进行 API 调用 来 挂 载 和 填充 自身 。 

(4) 用 户 点 击 “Account” 按 钮 。 

(5) React 应 用 程序 捕获 这 个 点 击 事件 ， 接 着 将 URL 更 新 到 https://example.com/account 并 重 
新 泻 染 。 

(6) 当 React 应 用 程序 重新 泻 染 时 , 它 检 查 URL。 它 看 到 用 户 正 在 查看 /account ,并 在 AccountView 
组 件 中 交换 。 

(7) React 应 用 程序 调用 API 来 填充 AccountView 组 件 。 

当 用 户 点 击 “Account” 按 钮 时 ,浏览 器 已 包含 了 完整 的 React 应 用 程序 。 那 么 就 不 需要 让 浏览 器 
重新 发 请 求 从 服务 器 获取 相同 的 应 用 程序 并 重新 挂 载 。React 应 用 程序 只 需 更 新 URL， 然 后 使 用 新 的 
组 件 树 (Accountview 组 件 ) 重新 泻 染 。 

这 就 是 JavaScript 路 由 的 思想 。 我 们 将 看 到 ， 路 由 涉及 两 个 主要 功能 : 修改 应 用 程序 的 位 置 
( URL ); 确定 在 给 定位 置 浑 染 哪些 React 组件。 

React 有 许多 路 由 库 , 但 社区 最 喜欢 的 显然 是 React Router。React Router 为 构建 丰富 的 应 用 程序 
(具有 跨越 许多 不 同 视图 和 URL 的 成 百 上 千 个 React 组 件 ) 提供 了 一 个 非常 好 的 基础 。 


React Router 的 核心 组 件 

为 了 修改 应 用 程序 的 位 置 ,可 以 使 用 链接 和 重 定向 。 在 React Router 中 , 链接 和 重 定向 由 两 个 React 
组 件 (Link 组 件 和 Redirect 组 件 ) 管理 。 

为 了 确定 在 给 定位 置 要 泻 染 什么 ， 我 们 还 使 用 了 两 个 React Router 组 件 : Route 和 Switch。 

为 了 更 好 地 理解 React Router, 我 们 将 从 构建 一 个 React Router 核心 组 件 的 基础 版 本 开始 。 这 样 就 
能 了 解 在 组 件 驱 动 范式 中 路 由 是 什么 样子 的 。 

然后 ， 我 们 将 把 组 件 蔡 换 成 由 react-router 库 提 供 的 组 件 ， 并 探索 这 个 库 中 其 他 更 多 的 组 件 和 
特性 。 

在 本 章 的 后 半 部 分 ， 我 们 将 看 到 React Router 在 一 个 稍 大 一 点 的 应 用 程序 中 运行 。 我 们 构建 的 应 
用 程序 将 具有 多 个 带 有 动态 URL 的 页 面 。 该 应 用 程序 将 与 受 API 令 牌 保护 的 服务 器 通信 。 我 们 将 探 
讨 一 个 在 React Router 应 用 程序 中 登录 和 注销 的 策略 。 



































































































































React Router v4 

A React Router v4 与 之 前 的 版 本 相 比 有 重大 变化 。ReactRouter 的 作者 指出 ， 这 个 版 本 
的 库 最 引 人 注 目的 地 方 在 于 它 “ 仅 服务 于 React”。 
我 们 赞同 这 个 观点 。 在 撰写 本 文 时 v4 才刚 刚 发 布 ， 我 们 发 现 它 的 范式 是 如 此 引 人 注 目 ， 
以 至 于 我 们 想 要 确保 在 本 书 中 涵盖 的 是 V4 而 不 是 V3。 我 们 相信 v4 很 快 会 被 社区 采用 “。 
因为 v4 太 新 了 ， 所 以 在 接 下 来 的 几 个 月 里 它 可 能 会 发 生 一 些 变 化 ， 但 v4 的 本 质 已 
确定 ， 本 章 将 重点 讨论 这 些 核 心 概念 。 











人 翻译 本 书 时 ，v4 已 被 社区 采用 。 译 者 注 
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9.2 构建 react-router 组 件 


9.2.1 完整 的 应 用 程序 





本 章 的 所 有 示例 代码 routing 文件 夹 中 。 我 们 将 从 basics 应 用 程序 开始 : 





$ cd routing/basics 


查看 该 目录 ， 可 以 看 到 此 应 用 程序 是 由 create-react-app 驱动 的 : 


$ 1s 

README .md 
nightwatch. json 
package. json 
public/ 

STC/ 

tests/ 



































省 如 果 你 需要 复习 一 下 create-react-app ， 请 参考 第 7 章 。 


React 应 用 程序 位 于 src/ 目 录 : 


$ 1s src 

App.css 

App.js 
SelectableApp.js 
complete/ 
index-complete. js 
index.css 
index.js 

logo.svg 


complete 文件 夹 中 包含 了 App.js 的 完整 版 本 。 该 文件 夹 还 包含 本 节 构 建 的 每 个 App. js 的 迭代 





版 本 。 
安装 npm 包 : 
$ npm i 


此 时 , index. js 正在 加 载 的 是 index-complete. js。index-complete.js 使 用 了 SelectableApp 


组 件 让 我 们 能 够 在 应 用 程序 的 不 同和 迭代 版 本 之 间 切 换 。SelectableApp 组 件 仅 
如 果 我 们 启动 应 用 程序 ， 就 可 以 看 到 完整 的 版 本 : 


$ npm start 



































用 于 演示 





目的 。 





该 应 用 程序 由 三 个 链接 组 成 。 点 击 链接 会 在 应 用 程序 下 方 显 示 有 关 所 选 水 域 的 简介 ( 见 图 9-2 )。 
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© /ReactApp K React 


次 GC © localhost:3000/atlantic 食 | : 


Which body of water? 


。 /atlantic 

se /pacific 

。 /black-sea 
Atlantic Ocean 


The Atlantic Ocean covers approximately 1/5th of the surface of the earth. 











图 9-2 完整 的 应 用 程序 


注意 ， 点 击 链接 会 改变 应 用 程序 的 位 置 。 点 击 /atlantic 链接 ，URL 会 更 新 到 /atlantic。 重 要 
的 是 ， 当 我 们 点 击 链 接 时 ， 浏览 器 不 会 发 出 请 求 ,， 但 关于 大 西洋 的 简介 会 出 现 ， 且 浏览 器 的 地 址 栏 会 
立即 更 新 到 /atlantic。 

点 击 /black-sea 链接 会 显示 倒计时 。 倒 计时 结束 后 ， 应 用 程序 会 将 浏览 器 重 定向 到 /。 


这 个 应 用 程序 中 的 路 由 是 由 react-router 库 提供 支持 的 。 我 们 将 通过 构建 自己 的 React Router 
组 件 来 自行 构建 该 应 用 程序 的 版 本 。 


本 节 将 在 App.js 文件 中 工作 。 
9.2.2 ”构建 Route 组 件 


我 们 将 从 构建 React Router 的 Route 组 件 开始 。 我 们 很 快 就 会 看 到 它 的 作用 。 


让 我 们 打开 sre/App.js 文件 ， 它 内 部 是 App 组 件 的 框架 版 本 。 在 引入 React 的 语 名 下面， 我 们 
定义 了 一 个 简单 的 App 组 件 ， 它 包含 两 个 ay 标签 


routing/basics/src/App.js 



































class App extends React.Component { 
render() { 
return ( 
《<div 
className='ui text container' 
> 
<h2 className='ui dividing header'> 
Which body of water? 
</h2> 
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<U1> 
<1i> 
<a href='/atlantic'> 
<code>»/atlantic</code> 
</a> 
和 
<1i> 
<a href='/pacific'> 
<code>/pacificx</code> 
</a> 
</1i> 
</ul> 
<hr /> 


{/* 我 们 将 在 这 里 插入 Route 组 件 */} 
</div> 
和 
} 
} 


我 们 有 两 个 常规 的 HIML 销 标 记 ， 分 别 指向 /atlantic 和 /pacific 路 径 。 
在 App 组 件 下 面 是 两 个 无 状态 的 函数 式 组 件 : 


routing/basics/src/App.js 


const Atlantic = () => ( 


<div> 
<h3>Atlantic Ocean</h3> 























<p> 
The Atlantic Ocean covers approximately 1/5th of the 


surface of the earth . 
</p> 
</div> 
) ; 


const Pacific = () => ( 


<div> 
<h3>Pacific Ocean</h3> 


<p> 
Ferdinand Magellan, a Portuguese explorer, named the ocean 
"mar pacifico' in 1521, which means peaceful sea. 


</p> 
</div> 


) 
这 些 组 件 泻 染 了 有 关 这 两 个 大 洋 的 一 
浏览 器 的 位 置 是 /atlantic 时 ， 我 们 想 让 Ap 
兴 Pacific 组 件 。 


回想 一 下 ,index.js 目前 是 按照 
查看 这 个 应 用 程序 之 前 ， 我 们 需要 确保 index. js 挂 载 的 是 在 








些 事实 。 最 后 ， 我 们 希望 在 App 组 件 内 部 泻 染 这 些 组 件 。 当 
组 件 泻 染 Atlantic 组 件 ; 当 位 置 是 /pacific 时 ， 则 泻 





























index-complete. js 来 加 载 完整 的 版 本 的 应 用 程序 到 DOM 在 
在 ./App .js 中 使 用 的 App 组 件 。 
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打开 index.js。 首 先 ， 注 释 掉 导入 index-complete 的 行 : 

// [步骤 1] 注释 掉 这 一 行 : 

// import "./index-complete"; 

与 其 他 create-react-app 应 用 程序 一 样 ， 把 React 应 用 程序 挂 载 到 DOM 会 在 index. js 中 进行 。 下 
面 取消 注释 挂 载 App 组 件 的 行 : 

// [步骤 2] 取消 注释 这 一 行 : 

ReactDOM.render( ¢App />, document.getElementById("root")); 

可 以 从 项 目 文件 夹 的 根 目 录 使 用 start 命令 启动 应 用 程序 : 

$ npm start 

可 以 看 到 页 面 上 泻 染 了 两 个 链接 。 点 击 它们 就 会 注意 到 浏览 器 发 出 了 一 个 页 面 请 求 。 接 着 地 址 栏 
会 被 更 新 ， 但 应 用 程序 中 没有 发 生 任何 变化 ( 见 图 9-3 )。 

















四 目 四 /图 ReactApp x React 


€ GC |© localhost:3000/atlantic 人 女 | 3 


Which body of water? 


e /atlantic 
e /pacific 

















图 9-3 地址 栏 更 新 了 ,但 应 用 程序 中 没有 发 生 任 何 变 化 

可 以 看 到 Atlantic 组 件 或 Pacific 组 件 都 没有 被 泻 染 ， 这 是 有 道理 的 ， 因 为 我 们 还 没有 在 App 
组 件 中 包含 它们 。 虽 然 如 此 ,但 有 趣 的 是 目前 应 用 程序 并 不 关心 路 径 名 的 状态 。 无 论 浏 览 器 向 服务 器 
请 求 什么 路 径 ， 服 务 器 都 将 返回 相同 的 index.html 和 相同 的 JavaScript 捆绑 包 。 

这 是 一 个 理想 的 基础 。 我们 希望 浏览 器 在 每 个 位 置 都 以 相同 的 方式 加 载 React, 并 按 照 React 的 方 
式 对 每 个 位 置 进 行 操 作 。 

下 面 根据 应 用 程序 的 位 置 ( /atlantic 或 /pacific ) 来 演 染 适当 的 组 件 (Atlantic 组 件 或 Pacific 
组 件 )。 为 了 实现 这 个 行为 ,我 们 将 编写 并 使 用 Route 组 件 。 

在 React Router 中 ，Route 是 一 个 组 件 ， 可 根据 应 用 程序 的 位 置 来 确定 是 否 泻 染 指定 的 组 件 。 需 
要 为 Route 组 件 提 供 两 个 参数 作为 props。 









































296 第 9 章 路 由 


























e@ path: 与 位 置 匹 配 的 路 径 。 
@ component: 当 位 置 匹配 路 径 时 需要 演 染 的 组 件 。 


在 编写 之 前 ， 我 们 来 看 如 何 使 用 这 个 组 件 。 在 App 组 件 的 render( ) 函数 中 ， 
组 件 ， 如 下 所 示 : 




















t 











routing/basics/src/complete/App-1.js 











我 们 使 用 了 Route 








<Ul> 
<1i> 
<a href='/atlantic'> 
<code>»/atlantic</code> 
</a> 
Li 
<1i> 
<a href='/pacific'> 
<code>/pacificx</code> 
</a> 
</1i> 
</ul> 


<hr /> 


<Route path='/atlantic"' 
<Route path= '/pacific' 
</div> 


component={Atlantic} /> 
component={Pacific} /> 


Dy 








带 的 位 置 相 比较 。 如 果 匹 配 ，Route 将 返回 对 应 的 组 件 。 


否则 ，Route 将 返回 nul1， 
内 容 。 








在 App.js 文件 的 顶部 ，App 组 件 上 方 ， 下 面 将 Route 组 件 编写 成 一 个 无 状态 函 
下 代码 ， 然 后 再 将 其 分 解 : 


~ 





























routing/basics/src/complete/App-1.js 





Route 和 React Router 中 的 其 他 东西 一 样 都 是 组 件 。 给 Route 组 件 提供 的 path 属 





本 





遇 性 会 与 浏览 
且 不 会 泻 染 任何 





数 。 我 们 先 看 一 








import React from 'react'; 


const Route = ({ path, component }) => { 
const pathname = window.1location.pathname; 
if (pathname.match(path)) { 
return ( 


React .createElement (component) 
); 
} else { 
return null; 
} 
}; 


class App extends React.Component { 
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使 用 ES6 的 解构 语法 来 从 参数 中 提取 两 个 属性 











path 和 component : 


routing/basics/src/complete/App-1.js 





const Route = ({ path, component }) => { 





接 下 来 对 pathname 变量 进行 实例 化 : 


routing/basics/src/complete/App-1.js 





const pathname = window.1location.pathname; 








在 浏览 器 环境 中 ,window. location 是 一 个 特殊 的 对 象 ， 包含 浏览 器 当前 位 置 的 属性 。 我 们 从 这 
个 对 象 中 获取 了 pathname 的 值 ， 它 是 该 URL 的 路 径 。 
































最 后 ， 如 果 提 供给 Route 组 件 的 path 与 pathname 匹配 ， 则 返回 该 组 件 。 和 否则 ， 返 回 nul1l : 
routing/basics/src/complete/App-1.js 








if (pathname .match(path)) { 
return ( 
React .createElement (component) 


2 


} else { 


return null; 


} 





虽然 React Router 附带 的 Route 组 件 更 为 复杂 ， 但 这 就 是 组 件 的 核心 。 该 组 件 将 path 与 应 用 程 
序 的 位 置 进行 匹配 ， 以 确定 是 否 应 泻 染 指定 的 组 件 。 












































下 面 来 看 一 下 该 应 用 程序 。 


试 试看 





也 可 以 泻 染 作为 props 传递 的 组 件 ， 如 下 所 示 : 


const Route = ({ pattern, component: Component }) => { 
const pathname = window.1location.pathname; 
if (pathname.match(pattern)) { 
return ( 
<Component /> 


3 


当 我 们 执行 此 操作 时 ， 必 须 将 组 件 名 称 大 写 ， 这 就 是 我 们 在 参数 中 将 组 件 提 取 为 
Component 的 原因 。 但 是 ， 当 一 个 组 件 类 是 一 个 动态 变量 时 ( 如 这 里 所 示 )，React 开 
发 人 员 通 常 更 喜欢 使 用 React .createElement() 方 法 而 不 是 JSX。 








保存 App. js。 如 果 Webpack 开发 服务 器 尚未 运行 ， 请 确保 它 运行 


$ npm start 


前 往 浏览 器 并 访问 该 应 用 程序 。 请 注意 ,我 们 现在 在 访问 每 个 位 置 时 都 会 泻 染 对 应 的 组 件 ( 见 


图 9-4 )。 
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®@O@/ 国 ReactApp x React 








€ GC | © localhost:3000/pacific x 


Which body of water? 


e /atlantic 


。 /pacific 





Pacific Ocean 


Ferdinand Magellan, a Portuguese explorer, named the ocean 'mar pacifico' in 1521, which means 
peaceful sea. 








图 9-4 /pacific 现在 会 泻 染 Pacific 组 件 


应 用 程序 会 响应 一 些 外 部 状态 ， 比 如 浏览 器 的 位 置 。 每 个 Route 组 件 都 会 根据 应 用 程序 的 位 置 决 
定 是 否 显示 其 组 件 。 注 意 ， 当 浏览 器 访问 /时 ， 两 个 组 件 都 不 会 匹配 ， 且 两 个 Route 组 件 占用 的 空间 


都 是 空 的 。 


当 点 击 一 个 链接 时 ， 我 们 看 到 浏览 器 正在 做 一 个 完整 的 页 面 加 载 ( 见 图 9-5 )。 


旧 目 是 /图 raacmp x React 因 /ReactAp x a 
过 CO localhost:3000/pacific 去 | 了 











示 xX | © localhost:3000/atlantic | 了 


Which body of water? 
。 /at1 各 tic 
,peo 

Pacific Ocean 


Ferdinand Magellan, a Portuguese explorer, named the ocean 'mar pacifico'in 1521, which means 
peaceful sea. 




















图 9-5 点 击 /atlantic 触发 整个 页 面 加 载 


默认 情况 下 ,每 次 点 击 链 接 时 ,浏览 器 都 会 向 Webpack 开发 服务 器 发 出 一 个 新 请 求 。 服 务 器 会 返 
回 index.html ， 接 着 浏览 器 需要 再 次 执行 挂 载 React 应 用 程序 的 工作 。 


9.2 ”构建 react-router 组 件 299 





正如 在 简介 中 强调 的 那样 , 这 个 周期 是 不 必要 的 。 在 /pacific 和 /atlantic 之 间 切 换 时 , 无 须 涉 
及 服务 器 。 客户 端 应 用 程序 已 加 载 了 所 有 组 件 并 准备 就 绪 。 只 需 在 点 击 /atlantic 链接 时 将 Atlantic 
组 件 替 换 为 Pacific 组 件 即 可 。 
我 们 和 希望 通过 点 击 链接 来 改变 浏览 器 的 位 置 , 但 不 需要 发 出 Web 请 求 。 随 着 位 置 的 更 新 , 我 们 可 
新 泻 染 React 应 用 程序 ， 并 依赖 于 Route 组 件 来 确定 泻 染 哪些 组 件 。 

为 此 ， 我 们 将 使 用 React Router 附带 的 另 一 个 组 件 来 构建 自己 的 版 本 。 


9.2.3 构建 Link 组 件 


在 Web 界面 中 ， 我 们 使 用 HTML “ay 标签 来 创建 链接 。 这 里 想 要 的 是 一 个 特殊 类 型 的 ca 标签 
当 用 户 点 击 此 标签 时 ,我 们 和 希望 浏览 吉 跳 过 默认 发 送 Web 请 求 来 获取 下 一 页 的 例 程 。 相反 ， 我 们 只 起 
手动 更 新 浏览 需 的 位 置 。 

大 多 数 浏览 器 提供 了 用 于 管理 当前 会 话 的 历史 纪录 的 API (window.history )。 我们 鼓励 你 在 浏览 
絮 内 部 的 JavaScript 控制 台中 进行 尝试 。 它 具有 history .back() 和 history. forward( ) 等 方法 , 允许 
你 浏览 历史 纪录 的 栈 。 目 前 需要 关注 的 是 它 有 一 个 history.pushstate() 方 法 , 允许 你 在 浏览 器 中 导 
航 到 需要 的 位 置 。 


Gi 有 关 历 史 纪 录 API 的 更 多 信息 ， 请 查看 MDN 文档 “History API”。 





























起 





以 


上 响 





















































历史 记录 API 收 到 了 一 些 HTML5 的 更 新 。 为 了 最 大 程度 地 提高 路 浏览 器 的 兼容 性 ，react-router 
使 用 了 一 个 名 为 History .js 的 库 来 与 该 API 交互。 这 个 history 包 已 包含 在 此 项 目的 package. json 中 : 


routing/basics/package.json 








"history": "4.3.0", 

















让 我 们 更 新 App. js 文件 ， 并 从 history 库 中 导入 createBrowserHistory 函数 。 我 们 将 使 用 此 
函数 来 创建 一 个 名 为 history 的 对 象 ， 并 使 用 它 与 浏览 器 的 历史 记录 API 交互 : 


routing/basics/src/complete/App-2.js 























import React from 'react'; 
import createHistory from 'history/createBrowserHistory'; 
const history = createHistory(); 


const Route = ({ path, component }) => { 











我 们 编写 一 个 Link 组 件 , 该 组 件 会 生成 一 个 带 有 特殊 onClick 绑 定 的 ca 标签 。 当 用 户 点 击 Link 

组 件 时 ， 我 们 将 阻止 浏览 器 发 出 请 求 。 相 反 ， 我 们 会 使 用 历史 纪录 API 来 更 新 浏览 器 的 位 置 。 

就 像 对 Route 组 件 所 做 的 那样 , 在 实现 该 组 件 之 前 , 我 们 先 来 看 如 何 使 用 它 。 在 App 组 件 的 render() 

函数 中 , 让 我 们 使 用 即将 实现 的 Link 组 件 来 奉 换 cay 标 签 。 我 们 将 不 使 用 href 属性 , 而 是 使 用 to 属 
性 来 指定 链接 的 位 置 : 
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routing/basics/src/complete/App-2.js 





<Ul> 
<1i> 
<Link to='/atlantic'> 
<code>»/atlanticx</code> 
</Link> 
</1i> 
<1i> 
<Link to='/pacific'> 
<code>»/pacific</code> 
</Link> 
</1i> 
</ul> 











Link 组 件 会 是 一 个 无 状态 函数 ， 它 演 染 一 个 带 有 onClick 处 理 程序 属性 的 ca> 标 签 。 








地 查看 该 组 件 ， 然 后 逐步 进行 分 析 : 


routing/basics/src/complete/App-2.js 


让 我 们 完整 





const Link = ({ to, children }) => ( 
<a 
onClick={(e) => { 
e.preventDefault(); 
history .push(to); 
}} 
href={to} 
> 
{children} 
</a> 


); 


class App extends React.Component { 








下 面 逐 步 进行 分 析 。 


onClick 














“ay 标签 的 onClick 处 理 程序 首先 调用 了 事件 对 象 上 的 preventDefault() 方 法 。 回 想 一 下 , 传递 
给 onClick 处 理 程序 的 第 一 个 参数 总 是 事件 对 象 。 调 用 preventDefault() 方 法 可 以 防止 浏览 器 对 新 




















位 置 发 出 Web 请 求 。 








我 们 使 用 history .push() API 将 新 位 置 “ 推 送 ” 到 浏览 器 的 历史 纪录 栈 上 。 这 检 











用 程序 的 位 置 ， 并 会 反映 到 地 址 栏 中 。 
href 
我 们 将 ca> 标 签 上 的 href 属性 设置 为 to 属性 的 值 。 




















和 做 可 以 更 新 应 



































上 于 我 们 是 在 









































当 用 户 点 击 传统 的 <ay 标 签 时 ， 浏 览 器 使 用 href 来 确定 下 一 个 要 访问 的 位 置 。 昌 
onClick 处 理 程序 中 手动 更 改 位 置 ， 因 此 href 并 不 是 绝对 必需 的 。 但 是 ,无论 如 何 我 们 都 应 该 设置 





它 。 因 为 它 可 以 使 用 户 能 够 悬 停 在 我 们 的 链接 上 ， 并 能 查看 它们 的 引导 位 置 或 者 在 新 标签 中 打开 链接 


( 见 图 9-6 )。 
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©Oo08 React App x React 





Ks GC © localhost 

Which body of water? 

Atlantic Ocean 

The Atlantic Ocean covers approximately 1/5th of the surface of the earth. 





ee sd 


图 9-6 悬 停 在 链接 上 
children 


在 ca> 标 签 内 ， 我 们 泻 染 了 children 属性 。 正 如 第 5 章 所 述 ，children 是 一 个 特殊 的 属性 。 它 
是 对 Link 组 件 中 包含 的 所 有 React 元 素 的 引用 ， 而 此 处 是 我 们 要 转换 成 链接 的 文本 或 HIML。 在 本 
例 中 ， 它 是 ccode>y/atlantick/codey> 或 ccode>/pacificc/codey 。 

因为 应 用 程序 使 用 的 是 Link 组 件 而 不 是 普通 的 ca 标签, 所 以 无 论 用 户 何 时 点 击 链接 , 我 们 都 会 
修改 浏览 器 的 位 置 而 无 须 执行 Web 请 求 。 

如 果 我 们 现在 保存 并 运行 应 用 程序 ， 那么 将 看 到 该 功能 并 不 像 预期 的 那样 能 正常 工作 。 可 以 点 击 
链接 ， 接 着 地 址 栏 会 更 新 到 新 的 位 置 且 无 须 刷 新 页 面 ， 但 应 用 程序 不 会 对 更 改 做 出 响应 ( 见 图 9-7 )。 























@O@ /图 ReactApp x \E React 








€ GC © localhost:3000/pacific 人 女 | 3 


Which body of water? 


。 /atlantic 
。 /pacific 


Atlantic Ocean 


The Atlantic Ocean covers approximately 1/5th of the surface of the earth. 





图 9-7 点 击 /pacific 链接 后 , 地 址 栏 显 示 了 /pacific, 但 我 们 在 页 面 上 看 到 的 
仍 是 Atlantic 组 件 
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虽然 Link 组 件 正在 更 新 浏览 器 的 位 置 ， 但 React 应 用 程序 并 没有 收 到 更 改 通知 。 当 位 置 发 生变 
化 时 ， 需 要 触发 React 应 用 程序 进行 重新 泻 染 。 

history 对 象 提供 了 一 个 1isten( ) 函数 ,我 们 可 以 在 这 里 使 用 。 我们 可 以 传递 给 listen( ) 一 个 
函数 ， 并 在 每 次 修改 历史 栈 时 调用 该 函数 ; 还 可 以 在 componentDidMount( ) 方 法 中 设置 1isten() 处 
理 程 序 ， 并 使 用 一 个 调用 forceUpdate() 方 法 的 函数 订阅 history 对 象 : 

routing/basics/src/complete/App-2.js 







































































class App extends React.Component { 
componentDidMount() { 
history.listen(() => this.forceUpdate()); 
} 


render() { 








当 浏 览 絮 的 位 置 发 生变 化 时 ,这 个 监听 函数 就 会 被 调用 ， 并 会 重新 渲染 App 组 件 。 然 后 Route 组 
件 会 重新 演 染 ， 以 匹配 最 新 的 URL。 

试 试看 

让 我 们 保存 更 新 后 的 App.js 并 在 浏览 器 中 访问 该 应 用 程序 。 请 注意 ， 当 我 们 在 /pacific 和 
/atlantic 两 个 路 由 之 间 导 航 时 ， 浏 览 髓 不 会 执行 整个 页 面 的 加 载 ! 

即使 应 用 程序 很 小 ， 我 们 也 可 以 享受 到 显著 的 性 能 提升 。 避 免 整个 页 面 加载 可 以 节省 数 百 毫 秒 ， 
并 能 防止 应 用 程序 在 页 面 变 化 期 间 出 现 “闪烁 ”。 鉴 于 这 是 一 种 优越 的 用 户 体 验 ， 随 着 应 用 程序 的 大 
小 和 复杂 性 增加 ， 我 们 能 很 容易 地 想象 到 这 些 所 带 来 的 好 处 。 

从 Link 组 件 和 Route 组 件 中 ， 我 们 了 解 了 如 何 使 用 组 件 驱 动 的 路 由 范式 来 更 新 浏览 器 的 位 置 ， 
并 让 应 用 程序 响应 这 种 状态 变化 。 

还 有 两 个 组 件 要 介绍 : Redirect 和 Switch。 这 些 组 件 将 使 我 们 对 应 用 程序 中 的 路 由 拥有 更 多 控制 权 。 

然而 ， 在 构建 这 些 组 件 之 前 ， 我 们 将 构建 一 个 React Router 的 Router 组 件 的 基础 版 本 。react- 
router 提供 了 一 个 Router 组 件 ， 它 是 每 个 react-router 应 用 程序 中 最 顶层 的 组 件 。 我 们 将 看 到 ， 
只 要 位 置 发 生变 化 ， 它 就 会 触发 重新 泻 染 。 它 还 为 React Router 中 的 所 有 其 他 组 件 提供 了 API， 可 用 
于 读 取 和 修改 浏览 器 的 位 置 。 


9.2.4 构建 Router 组 件 


Router 组 件 的 基础 版 本 应 该 做 如 下 两 件 事 : 

(1) 为 子 组 件 提供 1ocation 和 history 的 上 下 文 ; 

(2) 每 当 history 发 生变 化 时 ， 需 要 重新 演 染 应 用 程序 。 

关于 第 一 个 要 求 , 目前 Route 和 Link 组 件 正在 直接 使 用 两 个 外 部 API。Route 组 件 使 用 window. 
location 读 取 位 置 ，Link 组 件 使 用 history 来 修改 位 置 。Redirect 组 件 需要 访问 相同 的 API。 由 
react-router 提供 的 Router 组 件 可 通过 上 下 文 使 这 些 API 用 于 子 组 件 。 这 是 一 种 更 简洁 的 模式 ， 
味 着 你 可 以 轻松 地 将 自己 的 location 或 history 对 象 注入 应 用 程序 中 进行 测试 。 
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多 如 果 你 需要 复习 一 下 上 下 文 ， 可 以 阅读 第 5 章 。 


关于 第 二 个 需求 ， 现 在 App 组 件 已 在 componentDidMount( ) 函数 中 订阅 了 history。 我 们 将 把 这 








个 责任 转移 到 Router 组 件 ， 它 将 是 应 用 程序 的 最 顶层 组 件 。 


在 构建 Router 组 件 之 前 ， 让 我 们 先 在 App 组 件 内 部 使 用 它 。 因 为 我 们 不 
书 componentDidMount() 函 数 ， 所 以 可 将 它 转换 成 无 状态 函数 。 





























在 App 组 件 的 顶部 , 我 们 将 它 转换 为 函数 , 删除 componentDidMount() 函数 并 添加 <Routery> 的 开 


始 标记 : 


routing/basics/src/complete/App-3.js 


需要 在 App 组 件 中 使 











const App = () => ( 
<Router> 
<div 
className='ui text container' 





在 底部 关闭 : 


routing/basics/src/complete/App-3.js 





<Route path='/atlantic' component={Atlantic} /> 
<Route path='/pacific' component={Pacific} /> 
«</div> 
</Router> 


); 





我 们 会 在 App 组 件 上 方 声 明 Router 组 件 。 在 逐步 阅读 该 组 件 之 前 ， 让 我 们 先 看 看 它 的 全 貌 : 








routing/basics/src/complete/App-3.js 





class Router extends React.Component { 


static childContextTypes = { 
history: PropTypes .object, 
location: PropTypes.object, 


}; 


constructor(props) { 
super(props); 


this.history = createHistory(); 
this.history.listen(() => this.forceUpdate()); 


} 


getChildContext() { 
return { 
history: this.history, 
location: window.1location, 
}; 
} 
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render() { 
return this.props.children; 
} 
} 





订阅 history 
在 新 的 Router 组 件 的 构造 函数 中 ,我 们 初始 化 this history。 然后 订阅 组 件 的 变化 ， 这 与 我 们 
在 App 组 件 中 所 做 的 相同 : 


routing/basics/src/complete/App-3.js 


























constructor(props) { 
super(props); 


this.history = createHistory(); 
this.history.listen(() => this.forceUpdate( )); 
} 





公开 上 下 文 
如 前 所 述 , 我 们 希望 Router 组 件 向 其 子 组 件 公 开 两 个 属性 。 这 可 以 使 用 React 组件 的 上 下 文 特性 
来 实现 。 让 我 们 将 希望 向 下 传递 的 两 个 属性 (history 和 1ocation ) 添加 到 子 组 件 的 上 下 文中 。 
为 了 向 子 组 件 公开 上 下 文 ,我 们 必须 指定 每 个 上 下 文 的 类 型 。 可 以 通过 定义 childContextTypes 
来 做 到 这 一 点 。 
首先 需要 在 文件 顶部 导入 prop-types 包 : 
routing/basics/src/complete/App-3.js 

















I 


























三 









































import PropTypes from 'prop-types'; 





然后 可 以 定义 childContextTypes: 
routing/basics/src/complete/App-3.js 





class Router extends React.Component { 


static childContextTypes = { 
history: PropTypes.object, 
location: PropTypes.object, 


}; 








JavaScript 类 : static 
在 上 面 的 类 内 部 定义 childContextTypes 的 行 与 下 面 类 定义 执行 的 操作 相同 : 


Router .childContextTypes = { 
history: PropTypes.object, 
location: PropTypes.object, 


}; 
此 关键 字 允 许 我 们 在 Router 类 本 身 定义 属性 ， 而 不 是 Router 的 实例 。 
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然后 在 getCchildContext() 函 数 中 返回 该 上 下 文 对 象 ; 


routing/basics/src/complete/App-3.js 





getChildContext() { 
return { 
history: this.history, 
location: window.1location, 
并 
} 























最 后 ， 在 render( ) 函数 中 泻 染 由 新 的 Router 组 件 包 装 的 子 组 件 : 


routing/basics/src/complete/App-3.js 





render() { 
return this.props.children; 


} 











因为 在 Router 组 件 内 部 初始 化 了 history， 所 以 我 们 可 以 删除 它 在 文件 顶部 的 声明 : 


routing/basics/src/complete/App-3.js 





import React from 'react'; 
import createHistory from 'history/createBrowserHistory'; 


eenst histery = ereateHisteryO; 








由 于 现在 有 了 在 上 下 文中 传递 history 和 location 的 Router 组 件 , 因 此 可 以 更 新 Route 和 Link 














组 伯 





F 以 使 用 上 下 文中 的 这 些 变量 。 
让 我 们 先 处 理 Route 组 件 。 传 递 给 无 状态 函数 式 组 件 的 第 二 个 参数 是 上 下 文 对 象 。 我 们 会 在 组 从 




















TT 











的 参数 中 从 context 对 象 中 获取 location ， 而 不 是 使 用 window. location 上 的 位 置 : 


routing/basics/src/complete/App-3.js 





const Route = ({ path, component }, { location }) => { 

const pathname = location.pathname; 
if (pathname.match(path)) { 

return ( 

React .createElement (component) 

); 
} else { 

return null; 
} 


Route.contextTypes = { 
location: PropTypes.object, 


起 












































在 Route 组 件 下 面 ， 我 们 设置 了 contextTypes 属性 。 请 记 住 ， 要 接收 上 下 文 ， 组 件 必 须 将 其 要 


接收 的 上 下 文部 分 列 入 白 名 单 。 
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让 我 们 也 以 类 似 的 方式 更 新 Link 组 件 。Link 组 件 可 以 使 用 上 下 文 对 象 中 的 history 属性 : 


routing/basics/src/complete/App-3.js 





const Link = ({ to, children }, { history }) => ( 
<a 
onClick={(e) => { 
e.preventDefault( ); 
history .push(to); 
}} 
href={to} 
> 
{chilgdren} 
</a> 


) 


Link.contextTypes = { 
history: PropTypes.object, 
}; 














应 用 程序 现在 封装 在 一 个 Router 组 件 中 。 虽 然 它 缺少 由 react-router 提供 的 实际 的 Router 的 
许多 特性 ， 但 它 让 我 们 了 解 了 Router 组 件 的 工作 方式 : Router 组 件 向 子 组 件 提供 了 位 置 管理 API， 
并 在 位 置 更 改 时 强制 应 用 程序 重新 演 染 。 
保存 更 新 后 的 App.js 并 在 浏览 器 中 打开 应 用 程序 ， 可 以 看 到 一 切 都 和 以 前 完全 一 样 正常 工作 。 
有 了 Router 组 件 后 ， 我 们 现在 就 可 以 启动 自己 的 Redirect 组 件 ， 该 组 件 会 使 用 上 下 文中 的 
history 来 操作 浏览 器 的 位 置 。 
9.2.5 ”构建 Redirect 组 件 
Redirect 是 Link 组 件 的 兄弟 组 件 。Link 组 件 生成 一 个 链接 ， 用户 可 以 点 击 它 来 修改 位 置 ， 而 
Redirect 组 件 会 在 演 染 时 立即 修改 位 置 。 
像 Link 组 件 一 样 ， 我 们 希望 Redirect 组 件 也 提供 to 属性 ， 并 从 上 下 文中 获取 history 对 象 ， 
然后 使 用 该 对 象 修改 浏览 右 的 位 置 。 
然而 , 我 们 所 做 的 是 不 同 的 。 让 我 们 在 Router 组 件 上 方 编写 Redirect 组 件 , 并 查看 其 工作 原理 : 


routing/basics/src/complete/App-4.js 






























































































































































class Redirect extends React.Component { 


static contextTypes = { 
history: PropTypes.object, 
} 


componentDidMount() { 
const history = this.context .history; 
const to = this.props.to; 
history.push(to); 

} 
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render() { 
return null; 


} 
} 


class Router extends React.Component { 








我 们 已 在 componentDidMount( ) 函数 中 放置 了 history.push( ) 方 法 ! 在 组 件 安装 到 页 面 上 后 ， 
便 会 调用 history API 来 修改 应 用 程序 的 位 置 。 

如 果 你 熟悉 其 他 Web 开发 框架 的 路 由 范式 ,那么 Redirect 组 件 可 能 会 显得 特别 奇怪 。 这 是 因为 
大 多 数 开 发 人 员 已 习惯 于 使 用 命令 式 路 由 表 来 处 理 重 定向 。 

相反 ，react-router 提供 了 一 个 由 可 组 合 组 件 组 成 的 声明 式 范 式 。 这 里 ，Redirect 组 件 仅 表示 
为 一 个 React 组 件 。 想 要 重 定 向 吗 ? 只 需 泻 染 Redirect 组 件 即 可 。 

































































因为 我 们 将 Redirect 组 件 定义 为 一 个 JavaScript 类 ， 所 以 可 以 在 类 声明 中 使 用 
static 定义 contextTypes。 


在 完整 版 的 应 用 程序 中 ， 我 们 看 到 了 第 三 个 路 由 : black-sea。 当 访问 此 位 置 时 ， 该 应 用 程序 在 
重 定向 到 /之 前 会 显示 一 个 倒数 计时 器 。 下 面 让 我 们 来 构建 它 。 
首先 需要 为 即将 定义 的 BlackSea 组 件 添加 一 个 新 的 Link 和 Route 组 件 : 
routing/basics/src/complete/App-4.js 



































<U1> 
<1i> 
<Link to='/atlantic'> 
<code>»/atlantic</code> 
</Link> 
/Li 
《站 了 > 
<Link to='/pacific'> 
<code>»/pacific</code> 
</Link> 
CFLS 
<1i> 
<Link to='/black-sea'> 
<code»/black-sea¢/code> 
</Link> 
</1i> 
</ul> 


<hr /> 


<Route path='/atlantic' component={Atlantic} /> 
<Route path='/pacific' component={Pacific} /> 
<Route path='/black-sea' component={BlackSea} /> 
</div> 
</RouteTr> 
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让 我 们 继续 ， 在 App. js 的 底部 定义 BlackSea 组 件 。 

首先 实现 计数 逻辑 。 我 们 会 将 state .counter 初始 化 为 3。 然 后， 在 componentDidMount( ) 函数 

中 ， 我 们 将 使 用 JavaScript 的 内 置 setInterval( ) 函数 执行 倒计时 功能 
routing/basics/src/complete/App-4.js 








class BlackSea extends React.Component { 
state = { 
counter: 3 


}; 


componentDidMount() { 
this.interval = setInterval(() => ( 
this.setState(prevState => { 
return { 
counter: prevState.counter - 1, 
}; 
} 
))，1000) ; 
} 





setInterval( ) 函数 的 作用 是 每 秒 将 state .counter 的 值 减 1。 


个 站 当前 版 本 ， 因 此 我 们 向 setState() 方 法 传递 了 一 个 函 
数 ， 而 不 是 对 象 。 第 5 章 讨 论 过 此 技术 。 





我 们 必须 记 住 在 组 件 秋 载 时 清除 间隔 函数 。 这 与 第 2 章 的 计时 器 应 用 程序 中 使 用 的 策略 相同 : 


routing/basics/src/complete/App-4.js 








componentWillUnmount() { 
clearIinterval(this.interval); 


} 








最 后 ， 让 我 们 关注 重 定向 逻辑 。 | render( ) 因数 中 处 理 重 定向 逻辑 。 当 调用 render( ) 也 
数 时 ， 我 们 会 检查 计数 器 是 否 小 于 4。 如 果 是 ， 则 需要 执行 重 定向 。 我 们 通过 在 泻 染 输出 中 包含 
Redirect 组 件 来 做 到 这 一 点 


routing/basics/src/complete/App-4.js 











render() { 


return ( 
<div> 
<h3>Black Sea¢</h3> 
<p>Nothing to sea [sic] here ...¢</p> 
<p>Redirecting in {this.state.counter}...¢</p> 
{ 


(this.state.counter < 1) ? ( 
<Redirect to='/"' /> 
) : null 
} 
</div> 


); 
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} 
} 





在 BlackSea 组 件 挂 载 后 3 秒 , interval 也 数 会 将 state .counter 减 为 0。setState( ) 咀 数 的 作 


用 是 触发 BlackSea 组 件 的 重新 泻 染 ， 其 输出 将 包括 Redirect 组 件 。 当 Redirect 组 件 挂 载 时 ， 它 将 
触发 重 定向 。 


在 BlackSea 组 件 中 ,我 们 使 用 三 元 操作 符 来 控制 是 否 演 数 Redirect 组 件 。 在 React 


中 ,在 JSX 内 部 使 用 三 元 操作 符 很 常见 。 这 是 因为 我 们 不 能 在 JSX 中 谱 入 多 行 语句 ， 
比如 if/else 子 铅 。 











这 种 触发 重 定向 的 机 制 乍 一 看 可 能 有 些 奇 怪 ， 但 这 种 范式 很 强大 。 通 过 泻 染 组 件 和 传递 props， 
我 们 可 以 完全 控制 路 由 。 重 申 一 下 ，React Router 团队 对 库 的 接口 只 是 React 这 一 事实 感到 自豪 。 本 


章 的 后 半 部 分 将 进行 更 多 的 探索 ， 此 属性 为 我 们 提供 了 很 多 灵活 性 。 
试 试看 


建立 并 使 用 了 Redirect 组 件 后 ， 让 我 们 尝试 一 下 。 保 存 App .js 并 在 浏览 器 中 访问 /black-sea， 
可 以 看 到 组 件 在 执行 重 定向 之 前 会 先 演 染 ， 如 图 9-8 所 示 。 



































©@09 ,图 ReactApp 到 


€ GC © localhost:3000/black-sea 


Which body of water? 


Black Sea 
Nothing to sea [sic] here … 


Redirecting in 2... 











图 9-8 Black Sea 倒计时 





至 此 ， 我 们 了 解 了 React Router 的 三 个 基本 组 件 读 取 和 更 新 浏览 器 的 位 置 状 态 的 方式 。 我 们 还 看 
到 它们 如 何 与 最 顶层 Router 组 件 的 上 下 文 一 起 工作 。 


让 我 们 放弃 自己 手工 编写 的 React Router 组 件 ， 换 成 使 用 库 中 的 路 由 组 件 。 这 样 做 之 后 ， 我 们 可 


以 探索 由 react-router 提供 的 Route 组 件 的 更 多 特性 。 此 外 ， 我 们 将 了 解 Switch 组 件 提供 最 后 一 
个 关键 功能 的 方式 。 





310 第 9 章 路 由 





9.2.6 ”使 用 react-router 
我 们 将 从 react-router 包 中 导入 要 使 用 的 组 件 ， 并 删除 到 目前 为 止 编 写 的 组 件 。 


react-router 库 包含 一 些 不 同 的 npm 包 ， 例 如 react-router-dom 和 react-router-native。 
每 个 都 对 应 于 一 个 React 支持 的 环境 。 因 为 我 们 正在 构建 一 个 Web 应 用 程序 ， 所 以 需要 使 用 react 
router-dom 的 npm 包 。 









































react-router-dom 已 包含 在 这 个 项 目的 package.json 中 。 
在 App. js 文件 的 顶部 ， 删 除 createBrowserHistory 的 import 语句 。React Router 将 负责 历史 
纪录 的 管理 : 


import React from 'react'; 

import createHistory from ‘history/createBrowserHistory'; 

我 们 将 添加 一 个 import 语句 ， 其 中 包含 要 使 用 的 每 个 组 件 。 然 后 将 删除 所 有 自 定义 的 react-router 
组 件 。 其 他 所 有 的 组 件 可 以 保持 不 变 ， 如 App 组 件 : 


routing/basics/src/complete/App-5.js 















































import React from 'react'; 


import { 
BrowserRouter as Router, 
Route, 
Link, 
Redirect, 
} from 'react-router-dom' 


const App = () => ( 














react-router-dom 将 其 路 由 导出 为 BrowserRouter ， 以 区 别 于 包含 在 其 他 环境 中 的 路 由 ， 如 
NativeRouter。 像 这 里 所 做 的 那样 ， 使 用 as 关键 字 来 添加 Router 别名 是 一 种 常见 的 做 法 。 

保存 App. js。 在 完成 这 个 更 改 之 后 , 我 们 会 看 到 所 有 的 东西 都 能 正常 工作 , 和 切换 到 React Router 
之 前 一 样 。 


9.2.7 Route 组 件 的 更 多 特性 

我 们 现在 使 用 的 是 react-router 库 ， 而 导入 的 Route 组 件 中 有 几 个 额外 的 特性 。 
目前 已 使 用 component 属性 来 指示 Route 组 件 在 path 与 当前 位 置 匹配 时 要 演 染 哪个 组 件 ,Route 
组 件 也 接收 一 个 render 属性 ， 我们 可 以 使 用 这 个 属性 来 定义 一 个 泻 染 函数 。 

要 查看 这 个 示例 ， 让 我 们 将 另 一 个 Route 声明 添加 到 App 组 件 中 。 我 们 会 把 它 插入 其 他 现 有 的 
Route 组 件 的 上 方 。 这 一 次 将 使 用 render 属性 : 


routing/basics/Src/compjlete/App-S.js 











































































































<Route path='/atlantic/ocean' render={() => ( 
<div> 
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<h3>Atlantic Ocean - Again!</h3> 
<p> 
Also known as "The Pond." 
</p> 
</div> 

)} /> 
<Route path='/atlantic' component={Atlantic} /> 
<Route path='/pacific' component={Pacific} /> 
<Route path='/black-sea' component={BlackSea} /> 








保存 App. js。 如 果 访 问 应 用 程序 的 /atlantic， 不 出 所 料 ， 我 们 看 到 的 只 是 Atlantic 组 件 ， 如 
图 9-9 所 示 。 





RE 图 React App X React 





GC | © localhost:3000/atlantic 妆 


Which body of water? 


。 /atlantic 
® /pacific 
。 /black-sea 





Atlantic Ocean 


The Atlantic Ocean covers approximately 1/5th ofthe surface of the earth. 























图 9-9 /atlantic 上 只 显示 Atlantic 组 件 





如 果 访 问 /atlantic/ocean 会 发 生 什 么 呢 ? 现在 没有 Link 组 件 链接 到 这 个 路 径 ， 所 以 我 们 在 地 
址 栏 中 输入 该 路 径 。 可 以 注意 到 新 的 匿名 render 函数 著 加 在 另 一 个 Atlantic 组 件 之 上 ， 见 图 9-10。 
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© 国 ReactApp x 《下 React 
€ GC | © localhost:3000/atlantic/ocean 六 
Which body of water? 


。 /atlantic 

e。 /pacific 

。 /black-sea 
Atlantic Ocean — Again! 


Also known as "The Pond. 
AtlanticOcean 


The Atlantic Ocean covers approximately 1/5th of the surface of the earth. 


图 9-10 /atlantic/ocean 上 显示 了 两 个 Atlantic 组 件 





为 什么 会 看 到 两 个 组 件 呢 9 这 是 因为 Route 组 件 匹 配 位 置 和 path 的 方式 。 回 想 一 下 ，Route 组 
件 是 这 样 执行 匹配 的 : 


routing/basics/src/complete/App-l1.js 








if (pathname.match(path)) { 














想 想 这 是 怎么 回 事 : 


const ToutePath = '/atlantic'; 


帅 


let browserPath = '/atl'; 
browserPath.match(routePath); // -》 不 匹配 


browserPath = '/atlantic ' ， 
browserPath.match(routePath); // -》 匹配 


browserPath = '/atlantic/ocean’ 
browserPath.match(routePath); // -》 匹配 











两 个 Atlantic 组 件 的 Route 声明 都 与 位 置 /at1lantic/ocean 匹配 ， 所 以 它们 都 泻 染 了 。 

直到 现在 , 我 们 才 观 察 到 Route 组 件 的 这 种 行为 。 但 考虑 到 Route 组 件 的 工作 原理 ,这 种 行为 是 
有 意义 的 。 任 何 数量 的 组 件 都 可 能 匹配 给 定 的 位 置 ， 且 它们 都 会 泻 染 。Route 组 件 不 会 强加 任何 类 型 
的 排他 性 。 
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有 时 这 种 行为 是 不 受 欢 迎 的 。 稍 后 将 介绍 一 种 对 此 进行 管理 的 策略 。 





上 面 的 示例 和 路 径 名 匹配 的 实现 并 不 完全 准确 。 如 你 所 料 ，Route 组 件 是 根据 路 径 
名 的 开头 进行 匹配 的 。 因 此 ，/atlantic/ocean/pacific 与 Pacific 组 件 不 匹配 ， 
即使 该 路 径 包 含 /pacific 子 字符 串 。 


mm 








考虑 到 这 种 行为 ， 如 果 我 们 想 要 添加 一 个 在 用 户 访问 根 路 径 (/ ) 时 渔 染 的 组 件 ， 该 怎么 办 ? 如 
果 有 一 些 文本 来 引导 用 户 点 击 其 中 一 个 链接 就 好 了 。 

现在 我 们 知道 ， 下 面 这 个 解决 方案 是 有 问题 的 : 

routing/basics/src/complete/App-S.js 


{ /* 这 个 解决 方案 是 有 问题 的 */ } 
<Route path='/' render={() => ( 
<h3> 
Welcome! Select a body of saline water above. 
</h3> 
)} /> 




















因为 /匹配 /atlantic 和 /pacific 之 类 的 路 径 ， 所 以 该 组 件 会 在 应 用 程序 的 每 个 页 面 上 演 染 ( 见 
图 9-11 )。 














四 生生 ， 力 ReactApp x \a React 自身 四 ， 国 heactipp x 虹 React 
CG © localhost:3000/atlantic 食 | 到 3 GC © localhost:3000/pacific ed 
Which body of water? Which body of water? 


。 /atlantic 
。 /pacific 
。 /black-sea 


Welcomel Select a body of saline water above. 


Atlantic Ocean 


e /atlantic 
。/pacific 


。 /black-sea 


Welcome! Selectabody of saline water above. 


Pacific Ocean 





The Atlantic Ocean covers approximately 1/5th of the surface of the earth. Ferdinand Magellan, a Portuguese explorer, named the ocean ,mar pacifico' in 1521, which means 


peaceful sea. 


Jocainost3000Jatiantic | ccainost:3000/pacific 





9-11 声明 /的 Route 组 件 会 匹配 每 个 位 置 





这 种 行为 不 是 我 们 想 要 的 。 通 过 向 Route 组 件 添 加 exact 属性 , 我 们 可 以 指定 路 径 必 须 与 位 置 完 
全 匹配 。 现 在 为 /添加 Route 组 件 : 


routing/basics/src/complete/App-6.js 








<Route path='/atlantic/ocean' render={() => ( 
<div> 
<h3>Atlantic Ocean — Again!</h3> 
<p> 
Also known as "The Pond." 
</p> 
</div> 


)} /> 


314 第 9 章 路 由 





<Route path='/atlantic' component={Atlantic} /> 
<Route path='/pacific' component={Pacific} /> 
<Route path='/black-sea' component={BlackSea} /> 


<Route exact path='/' render={() => ( 
<h3> 
Welcome! Select a body of saline water above. 
</h3> 
)} /> 











这 里 使 用 了 一 些 JSX 的 语法 糖 。 虽 然 也 可 以 这 样 显 式 设置 属 | 


<Route exact={true} path='/' render={() => 人 


调 
后 











)} 
在 JSX 中 ， 如 果 列 出 的 属性 没有 赋值 ， 则 它 的 默认 值 为 true。 
试 试看 








保存 App. js。 在 浏览 器 中 访问 路 径 /， 可 以 看 到 欢迎 组 件 。 重 要 的 是 ， 欢 迎 组 件 不 会 在 任何 其 他 
路 径 上 出 现 ( 见 图 9-12 )。 


©99 / 国 ReactApp x Kon 
€ FC © localhost:3000 a 


Which body of water? 


e /atlantic 
e /pacific 
。 /black-sea 





Welcome! Select a body of saline water above. 





图 9-12 我们 在 路 径 / 上 欢迎 用 户 
现在 ， 当 用 户 访 问 / 时 ， 我 们 为 它 提供 了 一 个 合适 的 处 理 程序 。 
Route 组 件 是 一 种 功能 强大 但 简单 的 方法 ， 可 用 于 声明 在 哪些 路 由 上 显示 哪些 组 件 。 然 而 ， 仅 适 
用 Route 组 件 会 有 一 些 限制 。 
(1) 正如 前 面 看 到 的 /atlantic/ocean 路 由 ， 通 常 我 们 只 希望 有 一 个 Route 组 件 来 匹配 给 定 的 路 径 。 
(2) 此 外 ， 当 用 户 访问 应 用 程序 中 尚未 指定 相 匹 配 的 位 置 时 ， 我们 还 没有 一 个 策略 来 处 理 这 种 情况 。 
为 了 解决 这 些 问 题 ， 可 以 将 Route 组 件 封装 在 Switch 组 件 中 。 
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9.2.8 使 用 Switch 组 件 


当 Route 组 件 封 装 在 Switch 组 件 中 时 ， 只 会 展示 第 一 个 匹配 的 Route 组 件 。 











这 意味 着 可 以 使 用 Switch 组 件 来 解决 我 们 在 Route 组 件 上 看 到 的 两 个 限 秆 




















SC 


O 





(1) 当 用 户 访问 /atlantic/ocean 时 , 会 匹配 第 一 个 Route 组 件 , 而 随后 匹配 /atlantic 的 Route 








组 件 将 被 忽略 。 
































(2) 可 以 在 Switch 容 右 的 底部 包含 一 个 捕获 所 有 异常 的 Route 组 件 。. 如 果 
那么 此 组 件 就 会 被 泻 染 。 


让 我 们 在 实践 中 看 看 。 
为 了 使 用 Switch 组 件 ， 让 我 们 从 react-router 库 中 导入 它 : 


routing/basics/src/complete/App-7.js 
































其 他 Route 组 件 不 匹配 ， 





import React from 'react'; 


import { 
BrowserRouter as Router, 
Route, 
Link, 
Redirect, 
Switch, 
} from 'react-router-dom' 


const App = () => ( 














我 们 会 把 所 有 的 Route 组 件 封装 在 一 个 Switch 组 件 中 。 在 第 一 个 Route 组 件 的 上 方 添 加 Switch 





组 件 的 开始 标签 : 
routing/basics/src/complete/App-7.js 





<hr / 
<Switch> 
<Route path='/atlantic/ocean' render={() => (人 





接 下 来 将 在 现 有 的 Route 组 件 下 面 添加 “捕获 全 部 异常 ”的 Route 组 件 。 因为 我 们 没有 指定 path 











属性 ， 所 以 这 个 Route 组 件 将 匹配 所 有 路 径 : 
routing/basics/src/complete/App-7.js 





<Route exact path='/' render={() => ( 
<h3> 


Welcome! Select a body of saline water above. 
</h3> 


) 小 /> 


<Route render={({ location }) => ( 
<div className= 'ui inverted red segment '> 
<h3> 
Error! No matches for <code>{location.pathname} </code> 
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</h3> 
</div> 
)} /> 
</Switch> 
</div> 
</Router> 


好 











Route 组 件 将 location 属性 传递 给 render( ) 函数 ， 它 会 始终 将 这 个 属性 传递 给 它 的 目标 。 本 章 
的 后 半 部 分 将 对 此 进行 更 多 地 探讨 。 

试 试看 

保存 App.js。 访问 /atlantic/ocean， 注意 看 与 /atlantic 匹配 的 组 件 已 经 消失 了 。 接 下 来 , 手 
动 输入 一 个 不 存在 的 应 用 程序 路 径 ， 捕 获 全 部 异常 的 Route 组 件 将 被 泻 染 ( 见 图 9-13 )。 














@o@ reactApp 器 React 
客 CG | © localhost:3000/arctic 倪 | : 
Which body of water? 


eVatLantic 
。 /pacific 
。 /black-sea 


Error! No matchesfor /arctic 








图 9-13 /arctic 没有 任何 匹配 项 

至 此 , 我 们 已 熟悉 了 React Router 的 基础 组 件 。 我 们 将 应 用 程序 包装 在 Router 中 , 它 会 在 组 件 树 
中 为 所 有 React Router 组 件 提供 位 置 和 历史 记录 API， 并 确保 每 当 位 置 发 生变 化 时 就 重新 泻 染 React 
应 用 程序 。Route 和 Switch 组 件 可 帮助 我 们 控制 在 给 定位 置 泻 染 哪 些 React 组件。Link 和 Redirect 
组 件 使 我 们 能 够 在 不 加 载 整个 页 面 的 情况 下 修改 应 用 程序 的 位 置 。 

本 章 的 后 半 部 分 将 把 这 些 基础 组 件 应 用 到 更 复杂 的 应 用 程序 中 。 
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本 节 将 在 上 一 节 所 建立 的 基础 之 上 构建 应 用 程序 。 我 们 将 看 到 React Router 的 基础 组 件 如 何在 稍 
微 大 一 点 的 应 用 程序 中 协同 工作 ， 并 探索 其 独特 的 组 件 驱 动 路 由 范式 中 的 几 种 不 同 编程 策略 。 

本 节 中 的 应 用 程序 拥有 多 个 页 面 。 该 应 用 程序 的 主页 有 一 个 垂直 菜单 ,用户 可 以 在 其 中 选择 五 个 
不 同 的 音乐 专辑 。 选 中 一 个 专辑 会 立即 在 主 面板 中 显示 专辑 信息 。 所 有 的 专辑 信息 均 从 Spotify 的 API 
中 获取 。 
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与 React 应 用 程序 通信 的 服务 器 受 需要 登录 的 令 牌 保护 。 虽 然 这 不 是 一 个 真正 的 认证 流程 ， 但 该 
设置 将 让 我 们 了 解 如 何在 需要 用 户 登 录 的 应 用 程序 中 使 用 React Router。 


9.3.1 完整 的 应 用 程序 
本 节 的 代码 在 routing/music 文件 夹 中 。 从 本 书 代码 文件 夹 的 根 目录 导航 到 该 目录 : 


$ cd routing/music 


让 我 们 来 看 这 个 项 目的 结构 : 


$ 1s 
SpotifyClient.js 
client/ 
nightwatch. json 
package. json 
server.js 

server .test.js 
start-client.js 
start-server.js 
tests/ 





























在 项 目的 根 目录 中 有 一 个 Node API 服务 器 ( server .js ), 在 client 文件 夹 中 是 一 个 由 create- 
react-app 驱动 的 React 应 用 程序 : 
$ ls client 


package. json 
public/ 


a 9 
semantic. json 


src/ 

















该 项 目的 结构 与 食物 查找 应 用 程序 相同 。 在 开发 时 , 需要 启动 两 个 服务 器 : server .js 和 Webpack 
开发 服务 器 。Webpack 开发 服务 器 将 为 React 应 用 程序 提供 服务 。React 应 用 程序 与 server . js 交互 获 
取 给 定 专辑 的 数据 。server . js 接着 与 Spotify API 进行 通信 来 获取 专辑 数据 ， 流 程 见 图 9-14。 





React 应 用 程序 务 器 Spotify API 


client 本 s server.js 
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让 我 们 安装 依赖 项 并 查看 正在 运行 的 应 用 程序 。 我 们 有 两 个 package. json 文件 ,一 个 用 于 











server .js， 另 一 个 用 于 React 应 用 程序 。 我 们 将 同时 为 两 个 文件 运行 npm i 命令 ; 


npm i 
cd client 
$ npm i 
$ cd .. 


HH 


可 以 在 顶级 日 录 中 使 用 npm start 启动 应 用 程序 。 因 为 我 们 使 用 了 concurrently 来 同时 启动 两 个 





服务 噩 : 


$ npm start 


在 http://localhost:3689 找到 应 用 程序 。 





该 应 用 程序 会 弹出 一 个 登录 按钮 的 提示 ， 点 击 按钮 即 可 “登录 ”， 








登录 后 ， 可 以 看 到 一 个 垂直 侧面 菜单 的 专辑 列表 ( 见 图 9-15 )。 


四 利息 ,图 ReactApp 


无 须 输 入 用 户 名 或 密码 。 








CG © localhost:3000/albums 


Fullstack Music 


Albums Please select an album on the left 


Daydream Nation 
Remain In Light 
Paul's Boutique 
Doolittle 


Murmur 








9-15 垂直 侧面 菜单 的 专辑 列表 


点 击 其 中 一 个 专辑 便 会 将 其 显示 在 垂直 侧面 菜单 的 右 侧 。 此 外 ， 




















图 9-16 )。 


应 用 程序 的 URL 也 会 更 新 ( 见 








9.3 使 用 ReactRouter 的 动态 路 由 319 











©90 /BreactApp 本 React 
所 GCG | © liocalhost:3000/albums/2304F21GDWiGd33tFN3Z9gl bg 
Logout 
Fullstack Music 


Albums 


Daydream Nation 


Remain In Light 


Paul's Boutique 


Doolittle 


Murmur 


ONIC YOUTH 
DAYDREAM NATION 


By Sonic Youth - 
1988 - 34 songs 





Close 

大 Song © 

Teen Age Riot (Album Version) 6:57 
2 Silver Rocket (Album Version) 3:47 
3 The Sprawl (Album Version) 7:42 
4 ‘Cross the Breeze (Album Version) 7:00 
5 Erics Trip (Album Version) 3:48 
6 Total Trash (Album Version) 7:33 
7 Hey Joni (Album Version) 4:23 





图 9-16 ”点击 Daydream Nation 专辑 后 的 页 画 


URL 遵循 /albums/:albumId 的 格式 ， 

















其 中 :albumId 是 URL 的 动态 部 分 。 点 击 右 上 角 的 “Logout” 








(注销 ) 按钮 , 我 们 会 被 重 定向 到 登录 页 








面 (在 /1ogin 路 径 下 )。 如 果 我 们 试图 通过 在 地 址 栏 中 手动 输 





和 人 /albums 来 导航 回 该 地 址 ， 那 么 会 被 阻止 访问 该 页 面 。 相 反 ， 我 们 会 被 重 定向 回 /login。 
在 深入 研究 React 应 用 程序 之 前 ， 让 我 们 先 看 看 服务 器 的 API。 








9.3.2 ”服务 器 API 


1. POST /api/login 


服务 器 提供 了 一 个 用 于 检索 API 令 牌 的 端点 ， 即 /api/1ogin。/api/albums 端点 需要 这 个 令 牌 。 


与 实际 的 登录 端点 不 同 ，/api/login 端点 不 需要 用 户 名 或 密码 。 当 请 求 此 端点 时 ，server . js 
会 始终 返回 一 个 硬 编码 的 API 令 牌 。 此 令 牌 是 server .js 中 的 一 个 变量 : 


routing/music/server.js 








// 服务 器 验证 的 是 假 的 API 令 牌 


export const API_TOKEN = 'D6W69PRgCoDKgHZGJmRUNA'; 





要 测试 此 端点 ， 可 以 在 服务 器 运行 时 使 用 curl 对 该 端点 发 出 POST 请 求 : 
$ curl -X POST http://localhost:3001/api/login 


{ 


"success": true, 
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"token": "D6W69PRgCoDKgHZGJmRUNA" 
} 

React 应 用 程序 会 将 这 个 API 令 牌 存储 在 1ocalStorage 中 , 日 React 将 在 后 续 所 有 的 API 请 求 
包含 这 个 令 牌 。 点 击 应 用 程序 中 的 “Logout” 按 钮 可 以 将 令 牌 从 React 和 localStorage 中 移 除 , 那么 
用 户 必 须 再 次 登录 才能 访问 该 应 用 程序 。 

我 们 将 使 用 client/src/Client. js 中 声明 的 Client 库 与 API 和 localStorage 进行 交互 。 稍 后 
会 进一步 讨论 该 库 。 















































localStorage API 允许 我 们 在 用 户 浏览 器 中 读 写 键 值 存储 。 可 以 使 用 setItem() 
@ 将 项 存储 到 localStorage 中 : 


localStorage.setItem('gas', 'pop'); 
然后 使 用 getItem( ) 进 行 检 索 : 

localStorage.getItem('gas'); 

// => 'pop'’ 


注意 ， 存 储 在 localStorage 中 的 项 不 会 过 期 。 


A 安全 性 和 客户 端 API 令 牌 

网 络 安全 是 一 个 很 大 的 主题 。 管 理 客户 端 API 令 牌 是 一 项 复杂 的 任务 。 要 构建 一 个 真 
正安 全 的 Web 应 用 程序 , 理解 此 主题 的 复杂 性 非常 重要 。 不幸 的 是 ， 大 家 很 容易 错过 
一 些微 妙 的 实践 ， 这 些 实践 可 能 会 在 你 的 实现 中 留 下 巨大 的 安全 漏洞 。 
虽然 使 用 localStorage 来 存储 客户 端 API 令 牌 对 于 业余 项 目 来 说 效果 很 好 ， 但 是 
存在 很 大 的 风险 。 这 是 因为 用 户 的 API 令 牌 会 暴露 ， 还 会 受到 跨 站 点 脚本 的 攻击 ， 
且 存 储 在 localStorage 中 的 令 牌 对 自身 的 传输 安全 没有 要 求 。 如 果 你 的 开发 团队 
中 有 人 不 小 心 插入 了 通过 http 发 出 请 求 的 代码 ， 而 不 是 使 用 https， 那 么 你 的 令 牌 
将 暴露 在 传输 的 线路 上 。 
当 用 户 将 敏感 数据 委托 给 你 时 ， 作 为 开发 人 员 ， 你 有 义务 谨慎 考虑 它 的 安全 性 。 可 
以 使 用 一 些 策略 来 保护 应 用 程序 和 用 户 , 比如 使 用 JSON Web Token (JWT )、cookie， 
或 两 者 都 用 。 如 果 你 发 现 自己 处 于 这 个 幸运 的 位 置 ， 请 务必 花 时 间 和 仔细 研究 并 实现 
你 的 令 牌 管理 解决 方案 。 


2.GET /api/albums 

api/albums 端点 返回 Spotify API 为 给 定 的 专辑 列表 所 提供 的 数据 。 我 们 为 该 端点 提供 了 一 个 查 
询 参 数 ids ， 并 将 其 设置 为 所 需 专 辑 ID 的 列表 : 

/api/albums?ids=<id1>, <id2> 

注意 ， 这 些 ID 是 通过 逗号 分 隔 的 。 

此 端点 还 期 望 将 API 令 牌 作 为 查询 参数 (token ) 包含 在 内 。 包 含 id 和 token 的 查询 参数 如 下 
所 示 : 
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/api/albums?ids=¢id1>, “id2>&token=<token> 





下 面 是 一 个 用 cur1l 查询 /api/albums 端点 的 例子 : 


$ curl -X GET \ 
"http://1localhost:3001/api/albums"\ 
"?ids=1DWWb4Q39mp1T3NgyscowF ,2ANVost@y2y52ema1E9xAZ"\\ 
"&token=D6W69PRgCoDKgHZGJmRUNA" 
在 bash 中 ,\ 字 符 允 许 我 们 将 命令 分 割 成 多 行 。 也 可 过 类 似 的 方式 将 字符 串 分 
成 多 行 : 
$ echo "part1"N 


"part2" 
-> partipart2 


我 们 这 样 做 是 为 了 可 读 性 。 值 得 注意 的 是 "和 \ 字 符 之 间 没 有 空格 ， 且 "part2" 前 面 
也 没有 任何 空格 。 如 果 这 里 有 空格 ， 那 么 字符 串 就 不 能 正确 地 连接 。 


如 果 使 用 的 是 Windows， 则 只 能 将 此 命令 写成 单行 


起 每 个 专辑 的 信息 量 都 很 大 ， 因 此 我 们 在 这 里 不 会 包括 响应 的 示例 。 


9.3.3 ”应 用 程序 的 起 始 页 

完整 的 组 件 以 及 我 们 阶段 性 采取 的 步骤 位 于 client/src/components-complete 文件 夹 下 。 我 们 
将 在 client/src/components 文件 夹 中 编写 本 章 剩余 部 分 的 所 有 代码 。 

浏览 现 有 的 代码 ， 第 一 站 是 index. js ， 查 看 其 import 语句 : 


routing/music/client/src/index.js 











import React from "react"; 
import ReactDOM from "react-dom"; 


import { BrowserRouter as Router } from "react-router-dom"; 
import App from './components/App'; 


import "./styles/index.css"; 
import "./semantic-dist/semantic.css"; 


/ [步骤 1] 注释 掉 这 一 行 


import './index-complete'; 





意 ， 这 里 导入 了 Router 组 件 。 
和 上 一 个 项 目 一 样 , index. js 包含 了 index-complete. js, 它 允许 我 们 在 components/complete 
文件 夹 中 遍历 App 组 件 的 每 次 迭代 。 让 我 们 把 该 导入 语句 注释 掉 : 
/ [步骤 1] 注释 掉 这 一 行 


// import './index-complete'; 
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接着 , 在 index.js 的 底部 取消 对 调用 ReactDOM.render() 方 法 的 注释 。 注意, 我 们 把 cApp> 包 装 
在 <cRouter> 中 : 
// [步骤 2] 将 以 下 行 的 注释 取消 
ReactDOM.render( 
<Router> 
<App /> 
</Router>, 


document .getElementById("root") 
); 


在 index. js 中 使 用 cRouter> 包 装 App 组 件 是 React Router 应 用 程序 的 常见 模式 。 


保存 index.js。 在 开发 服务 器 仍 在 运行 的 情况 下 ， 我 们 将 看 到 起 始 页 是 一 个 精简 的 界面 ， 见 
图 9-17。 

















®@9 国 ReactApp x React 
€ CG © localhost:3000/albums/ | ; 

27 TeenAgeRiot(Live) 4:38 

28 RainkKing(Live) 4:07 

29 TotallyTrashed (Live) 1:57 

30 TotalTrash(Live) 5:15 

31 。 WithinYou WithoutYou 4:57 

32 TouchMel'mSick 2:34 

33 。 ComputerAge 5:12 

34 Electricity 2:47 


TVLKINGHEVDS 


By Talking Heads - 
1980 - 12 songs 


Close 





# Song 


1 Born Under Punches (The Heat Goes On) - 2005 Remastered Ver: 


2 Crosseyed And Painless- 2005 Remastered Version 





图 9-17 初始 的 App 组 件 
起 始 页 没有 使 用 React Router。 此 应 用 程序 在 一 个 页 面 上 列 出 了 所 有 的 专辑 ， 且 有 一 个 “Logout” 
按钮 ， 点 击 它 可 以 更 改 URL， 但 不 会 执行 任何 其 他 操作 。 同 样 “Close”( 关闭 ) 按钮 也 不 起 作用 。 
接 下 来 看 App. js: 


routing/music/client/src/components/App.js 














import React from 'react'; 


import TopBar from './TopBar'; 
import AlbumsContainer from './AlbumsContainer'; 
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import '../styles/App.css'; 


const App = () => ( 

《<div className='ui grid'> 
<TopBar /> 
<div className='spacer row' /> 
<div className='row'> 

<AlbumsContainer /> 

«</div> 

/divy 


); 


export default App; 





App 组 件 对 TopBar 组 件 和 AlbumsContainer 组 件 进行 了 泻 染 。 


者 与 往常 一 样 ， 整 个 应 用 程序 中 的 div 和 className 元 素 仅 用 于 结构 和 样式 。 和 其 他 
项 目 一 样 ， 该 应 用 程序 使 用 的 也 是 Semantic UT。 


现在 先 不 看 TopBar 组 件 。 
AlbumsContainer 是 与 API 交互 的 组 件 ， 用 于 获取 专辑 的 数据 。 接 着 它 为 每 个 专辑 演 染 对 应 的 














Album 组 件 。 


在 AlbumsContainer 组 件 的 顶部 ， 我 们 定义 了 导入 语句 。 我 们 也 有 一 个 硬 编码 的 ALBUM_IDS 列 








长 ，AlbumsContainer 组 件 使 用 它 从 API 获取 所 需 的 专辑 : 


routing/music/client/src/components/AlbumsContainer.js 





import React, { Component } from 'react'; 


import Album from './Album'; 
import { client } from '../Client'; 


const ALBUM_IDS = [ 
"2304F21GDWiGCd33tFN32gI ' ， 
"3AQgdwMNCiN7awXch5fAaG ' ， 
"1kmyirVya5fRxdjsPFDMO5 ' ， 
"6ym2BbRSmzAvoSGmwAFoxm ' ， 
"4Mw9Gcu1LT7JaipXdwrqtQ ' ， 
] ; 





AlbumsContainer 是 一 个 有 状态 的 组 件 ， 具 有 两 个 状态 属性 。 


@ fetched: 表示 AlbumsContainer 组 件 是 否 已 成 功 从 API 中 获取 了 专辑 数据 。 
e@ albums: 所 有 专辑 对 象 的 数组 。 


下 面 将 逐步 查看 该 组 件 ， 从 它 的 初始 状态 开始 : 


routing/music/client/src/components/AlbumsContainer.js 




















class AlbumsContainer extends Component { 
state = { 
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fetched: false, 
albums: [], 


地 





我 们 使 用 fetched 的 布尔 值 来 跟踪 是 否 已 经 从 服务 器 检索 到 专辑 。 
在 AlbumsContainer 组 件 挂 载 好 之 后 ， 我 们 会 调用 this .getAlbums( ) 函数 。 这 将 填充 状态 中 的 


albums : 


routing/music/client/src/components/AlbumsContainer.js 





componentDidMount() { 
this.getAlbums(); 
} 











在 getAlbums() 函 数 中 ,我们 使 用 了 Client 库 (在 src/Client.js 中 ) 向 API 发 出 请 求 ， 用 来 
获取 ALBUM_IDS 中 指定 的 专辑 数据 。 我 们 使 用 了 来 自 库 中 的 getAlbums( ) 方 法 ， 它 的 参数 是 专辑 ID 
当 我 们 获取 到 数据 时 更 新 状态 ， 将 fetched 设置 为 true， 并 将 albums 设置 为 获取 的 结果 : 


routing/music/client/src/components/AlbumsContainer.js 





























getAlbums = () => { 
client.setToken( 'D6W69PRgCoDKgHZGJmRUNA' ); 
client.getAlbums(ALBUM_IDS) 
.then((albums) => (人 
this.setState({ 
fetched: true, 
albums: albums, 

















注意 ， 在 调用 client .getAlbums( ) 之 前 ,我 们 调用 了 client .setToken()。 如 前 所 述 ，API 在 
/api/albums 端点 的 请 求 中 需要 一 个 令 牌 。 因 为 还 没有 在 应 用 程序 中 实现 登录 和 注销 功能 ， 所 以 我 们 
在 发 出 请 求 之 前 通过 手动 设置 令 牌 进行 作弊。 此 令 牌 与 server .js 期 望 的 令 牌 相同 : 


routing/music/server.js 





















































export const API_TOKEN = 'D6W69PRgCoDKgHZGJmRUNA'; 




















最 后 , AlbumsContainer 组 件 的 render( ) 方 法 会 对 this.state. fetched 进行 判断 。 如 果 还 没有 
获取 到 数据 ， 我 们 会 泻 染 加 载 图 标 ; 否则 ， 泻 染 this .state.albums 中 所 有 的 专辑 。 


routing/music/client/src/components/AlbumsContainer.js 











render() { 
if (!this.state.fetched) { 
return ( 
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<div className='ui active centered inline loader' /> 
和 
} else { 
return ( 
<div className='ui two column divided grid'> 
<div 
className='ui six wide column' 
style={{ maxWidth: 250 }} 
> 
{/* VerticalMenu 组 件 会 在 这 里 */} 
</div> 
<div className='ui ten wide column'> 
{ 
this.state.albums.map((a) => ( 
<div 
className='row’ 
key={a.id} 
> 
<Album album={a} /> 
</div> 
)) 





















































第 一 个 更 新 是 添加 在 完整 版 应 用 程序 中 看 到 的 垂直 菜单 。 这 个 垂直 沫 单 将 允许 我 们 选择 想 要 查看 


的 专辑 。 当 垂直 沫 单 中 的 专辑 被 选中 时 ， 该 专辑 应 该 被 显示 ， 且 应 用 程序 的 位 置 需要 更 新 到 /albums/ 

















:albumId。 


9.3.4 使 用 URL 人 参数 


此 时 ，App 组 件 正在 泻 染 TopBar 和 AlbumsContainer 组 件 : 


routing/music/client/src/components/App.js 





const App = () => ( 

<div className='ui grid'> 
<TopBar /> 
<div className= 'spacer row' /> 
<div className='row'> 

<AlbumsContainer /> 

</div> 

</div> 


由 




















如 我 们 所 见 ， 最 终 会 有 登录 和 注销 页 面 。 可 以 将 TopBar 组 件 保留 在 App 组 件 中 ， 因 为 我 们 希望 
TopBar 组 件 出 现在 每 个 页 面 中 。 因 为 我 们 希望 专辑 列表 页 面 出 现在 路 由 中 ,所 以 应 该 将 AlbumsContainer 
组 件 般 套 在 一 个 Route 组 件 里 。 我 们 只 会 在 /albums 位 置 上 演 染 它 。 这 将 为 即将 要 添加 的 /1ogin 和 
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/1ogout 做 好 准备 。 
首先 在 App .js 中 导入 Route 组 件 


routing/music/client/src/components-complete/App-1.js 








import React from 'react'; 


import { Route } from 'react-router-dom'; 

















接着 在 /albums 路 径 上 使 用 Route 组 件 : 


routing/music/client/src/components-complete/App-1.js 








const App = () => ( 

<div className='ui grid > 
<TopBar /> 
<div className='spacer row' /> 
<div className='row'> 

<Route path='/albums' component={AlbumsContainer} /> 

</div> 

</div> 


3 





现在 ， 只 有 当 我 们 在 /albums 路 径 上 访问 应 用 程序 时 ，AlbumsContainer 组 件 才 会 演 染 。 


我 们 会 让 AlbumsContainer 组 件 演 染 一 个 VerticalMenu 子 组 件 ,并 让 父 组件 (AlbumsContainer 
组 件 ) 将 专辑 列表 传递 给 子 组 件 (VerticalMenu 组 件 )。 让 我 们 首先 编写 VerticalMenu 组 件 ， 然 后 
再 更 新 AlbumsContainer 组 件 来 使 用 它 。 












































打开 src/components/VerticalMenu. js 文件， 当前 文件 包含 VerticalMenu 组 件 的 脚手架 : 


routing/music/client/src/components/VerticalMenu.js 





import React from 'react'; 
import '../styles/VerticalMenu.css'; 


const VerticalMenu = ({ albums }) => (人 
<div className='ui secondary vertical menu'> 
<div className='header item'> 
Albums 
</div> 
{/* 在 这 里 演 染 专辑 菜单 */} 
</div> 


和 


export default VerticalMenu 























如 我 们 所 见 ，VverticalMenu 组 件 期 望 得 到 一 个 albums 属性 。 我 们 会 遍历 albums 属性 ， 并 为 每 
个 专辑 泻 染 一 个 Link 组 件 。 首 先 ， 我 们 将 从 react-router 库 中 导入 Link 组 件 : 


routing/music/client/src/components-complete/VerticalMenu-1.js 




















1 








import React from 'react'; 
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import { Link } from 'react-router-dom'; 


import '../styles/VerticalMenu.css'; 














由 





昌 性 是 /albums/ :albumId : 





我 们 将 使 用 map( ) 方 法 来 编写 Link 组 件 列表 ， 每 个 Link 组 件 的 to 


routing/music/client/src/components-complete/VerticalMenu-1.js 


三 











const VerticalMenu = ({ albums }) => ( 
<div className='ui secondary vertical menu > 
<div className='header item'> 
Albums 
</div> 
{ 
albums.map((album) => ( 
<Link 
to={“/albums/${album.id}*} 
className="'item"' 
key={album.id} 


{album.name} 
</Link> 
)) 





区 


我 们 将 className 设置 为 item 用 于 样式 显示 ， 并 使 用 Semantic UI 的 垂直 荣 单 。 
现在 ， 当 用 户 点 击 VerticalMenu 组 件 的 其 中 一 个 菜单 项 时 ， 它 会 更 新 应 用 程序 的 位 置 。 让 我 们 


更 新 AlbumsContainer 组 件 来 使 用 VerticalMenu 组 件 ， 并 根据 应 用 程序 的 位 置 来 演 染 一 个 专辑 。 
打开 src/components/AlbumsContainer .js 文件 ,将 VerticalMenu 组 件 添加 到 导入 列表 中 : 






















































































import Album from './Album'; 
import VerticalMenu from './VerticalMenu'; 
import { client } from '../Client'; 


然后 ， 在 render( ) 方 法 中 ， 我 们 会 添加 VerticalMenu 组 件 ， 并 将 其 租 套 在 一 列 中 。 


routing/music/client/src/components-complete/AlbumsContainer-1.js 

















render() { 
if (!this.state.fetched) { 
return ( 
<div className='ui active centered inline loader' /> 
> 
} else { 
return ( 
<div className='ui two column divided grid'> 
《<div 
className='ui six wide column' 
style={{ maxWidth: 250 }} 
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<VerticalMenu 
albums={this.state.albums} 
/> 
</div> 
《<div className='ui ten wide column > 





@® 因为 VerticalMenu 组 件 不 需要 完整 的 专辑 对 象 ， 所 以 像 下 面 这 样 传递 组 件 子 集 对 
象 确实 会 更 简洁 : 


[{ name: 'Madonna'，id: '1DWWb4Q39mp1T3NgyscowF' }] 
这 也 会 使 得 VerticalMenu 组 件 更 加 灵活 ， 因 为 我 们 可 以 对 它 进 行 编写 ， 使 其 成 为 
任何 项 目 列表 的 侧面 菜单 。 


在 AlbumsContainer 的 输出 日 在 VerticalMenu 组 件 旁 边 的 列 中 ， 我 们 希望 现在 泻 染 单个 专辑 ， 
而 不 是 所 有 专辑 的 列表 。 我 们 知道 verticalMenu 组 件 将 根据 /albums/:albumId 格式 来 修改 位 置 。 可 
以 使 用 一 个 Route 组 件 来 匹配 这 个 模式 ， 并 从 URL 中 提取 :albumId 参数 。 

在 AlbumsContainer.js 中， 首先 将 Route 组 件 添加 到 AlbumsContainer 组 件 的 导 和 人 列表 中 : 


routing/music/client/src/components-complete/AlbumsContainer-1.js 




















import React, { Component } from 'Treact ' 


import { Route } from 'react-router-dom'; 





然后 , 在 VerticalMenu 组 件 下 方 的 div 标签 内 部 的 render( ) 函数 中 , 我 们 将 替换 泻 染 所 有 专辑 
的 map( ) 方 法 调用 。 相 反 ， 我 们 将 定义 一 个 带 有 render 属性 的 Route 组 件 。 我 们 先 来 看 它 的 全 貌 ， 
然后 再 进行 拆 分 : 


routing/music/client/src/components-complete/AlbumsContainer-1.js 














<div className='ui ten wide column'> 
<Route 
path= '/albums/:albumId ' 
render={({ match }) => { 
const album = this.state.albums.find( 


(a) => a.id === match.params.albumId 
); 
return ( 
<Album 
album={album} 
/> 
); 
}} 
/> 
</div> 





path 
我 们 匹配 的 字符 串 是 /albums/:albumId。: 是 向 React Router 说 明 URL 的 这 一 部 分 是 动态 参数 。 
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值得 注意 的 是 ， 任 何 值 都 会 匹配 这 个 动态 参数 。 

render 

我 们 将 这 个 Route 组 件 上 的 render 属性 设置 成 一 个 函数 。Route 组 件 会 使 用 一 些 参数 ( 比如 
match ) 来 调用 render( ) 函数 。 稍 后 会 进一步 探讨 match。 这 里 ， 我 们 对 match 的 params 属性 更 
感 兴趣 。 


Route 组 件 会 从 URL 中 提取 所 有 动态 参数 ， 并 将 它们 传递 给 match.params 对 象 内 的 目标 组 件 。 
在 本 例 中 ，params 将 包含 albumId 属性 ， 它 对 应 于 当前 URL ( /albums/:albumId ) 中 “:albumId” 
部 分 的 值 。 

我 们 使 用 find( ) 方 法 来 获得 匹配 params .albumId 的 专辑 ， 以 演 染 单个 Album。 

用 户 现在 可 以 使 用 verticalMenu 组 件 中 的 链接 来 修改 应 用 程序 的 位 置 ， 接 着 AlbumsContainer 
组 件 会 使 用 Route 组 件 读 取 位 置 并 提取 所 需 的 albumId， 以 泻 染 所 需 的 专辑 。 

试 试看 

保存 AlbumsContainer .js。 如 果 应 用 程序 还 没有 运行 ， 则 请 确保 使 用 npm start 命令 从 顶级 目 
录 中 启动 它 : 

$ npm start 


目前 ， 当 我 们 在 浏览 器 中 访问 http://1ocalhost:3886 时 , 只 有 TopBar 组 件 是 可 见 的， 见 图 9-18。 





























DoD ReactApp 
€ CG © localhost:3000 ra 





Fullstack Music Logout 





图 9-18 根 路 径 (/ ) 没有 任何 匹配 项 
回想 一 下 ,在 App 组 件 中 ,我 们 将 AlbumsContainer 组 件 包装 在 模式 为 /albums 的 Route 组 件 中 。 
因为 它 和 /不 匹配 ， 所 以 App 组 件 的 主体 仍 是 空 的 。 
通过 在 浏览 器 的 地 址 栏 中 手动 输入 /albums 路 径 来 访问 它 ， 我 们 将 看 到 VerticalMenu 组 件 会 演 
染 ( 见 图 9-19 )。 








四 目 量 ,图 ReactApp x React 
将 GCG © localhost:3000/albums 全 | 3 
Logout 
Fullstack Music 
Albums 


Daydream Nation 


Remain In Light 


Paul's Boutique 


Doolittle 


Murmur 





图 9-19 VerticalMenu 组 件 出 现 了 


在 VerticalMenu 组 件 旁 边 的 列 中 并 没有 泻 染 任何 内 容 ， 因 为 该 列 正在 等 待 一 个 匹配 
/albums/:albumId 路 径 的 URL。 点 击 其 中 一 个 专辑 就 会 改变 应 用 程序 的 位 置 〈( 见 图 9-20 )。 

















®©09 /ReactApp x Wa React 
L CG | © localhost:3000/albums11kmyirVya5fRxdjsPFDM05 倪 | } 
Logout 
Fullstack Music 


Albums 


Daydream Nation 
By Beastie Boys 
Remain In Light 1989-23songs 


Pauls Boutiaue Close 


Y 


Doolittle 





Murmur 


1 ToAllTheGirls-2009DigitalRemaster 


2 ShakeYourRump-2009Digital Remaster 


3 Johnny Ryall - 2009 Digital Remaster 


4 EggMan-2009DigitalRemaster 


5 High Plains Drifter - 2009 Digital Remaster 


6 TheSoundsOfScience-2009 Digital Remaster 








3-Minute Rule - 2009 Digital Remaster 
1ocainost3000/albums/1kmyirvya6fRxdjsPFDMO5 





图 9-20 选中 一 个 专辑 
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现在 总 算 取得 了 一 些 进 展 ! 虽然 “Close” 和 “Logout” 按 钮 仍 不 起 作用 ,但 我 们 可 以 在 专辑 之 间 
进行 切换 ， 且 应 用 程序 在 更 新 位 置 时 不 会 刷新 页 面 。 


接 下 来 让 我 们 连接 “Close” 按 钮 。 
9.3.5 将 路 径 名 作为 props 传 递 
在 Album.js 中 ， 专 辑 的 头 部 渔 染 了 一 个 “Close” 按 钮 ; 


routing/music/client/src/components-complete/Album-1.js 










































































<div className='six wide column'> 
<p> 
{ 
“By ${album.artist.name} 
— ${album.year} 
— ${album.tracks.1length} songs. 
} 
</p> 
<div 
className='ui left floated large button' 
> 
Close 
</div> 





要 “关闭 ”专辑 , 需要 将 应 用 程序 的 位 置 从 /albums/:albumId 更 改 为 /albums。 通 过 我 们 对 路 由 
的 了 解 ， 在 这 一 点 上 可 以 创建 一 个 链接 来 处 理 此 行为 ， 如 下 所 示 : 


// 有 效 的 “Close” 按 钮 
<Link 
to='/albums’ 
className='ui le 化 floated large button'’' 
> 
Close 
</Link> 


这 完全 有 效 ， 但 在 为 应 用 程序 添加 路 由 时 我 们 必须 要 考虑 其 灵活 性 。 

举 个 例子 , 如果 我 们 想 修改 应 用 程序 , 使 得 专辑 页 面 位 于 /位 置 而 不 是 /albums 上 , 该 怎么 办 呢 ? 
必须 改变 应 用 程序 中 对 /albums 的 所 有 引用 。 

更 值得 关注 的 是 ， 如 果 想 在 应 用 程序 的 不 同位 置 显 示 一 个 专辑 ， 该 怎么 办 呢 ? 例如 ， 我 们 可 能 在 
/artists/:artistId 位 置 添加 艺术 家 页 面 。 然 后 用 户 可 以 深入 单个 专辑 ， 并 打开 URL /artists/ 
:artistId/albums/:albumId。 在 这 种 情况 下 , 需要 一 个 “Close” 按钮 来 链接 到 /artists/:artistId， 
而 不 是 /albums。 

一 种 简单 的 保持 灵活 性 的 方法 是 将 路 径 名 作为 props 通过 应 用 程序 传递 。 下 面 来 看 这 是 如 何 运 
作 的 。 


回想 一 下 , 在 App.js 中， 我 们 为 AlbumsContainer 组 件 指定 的 路 径 是 /albums: 
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routing/music/client/src/components-complete/App-1.js 





<Route path='/albums' component={AlbumsContainer} /> 








我 们 刚刚 看 到 Route 组 件 调用 了 一 个 带 有 match 参数 的 函数 ， 且 该 函数 作为 render 属性 传递 。 


本 























Route 组 件 还 在 通过 component 属性 泻 染 的 组 件 上 设置 此 属性 。 无 论 Route 如 何 泻 染 其 组 件 ， 它 始终 


都 会 设置 三 个 属 


/albums。 

















I 














性 : 


dl 


@ match 
@ location 


@ history 


根据 React Router 的 文档 ，match 对 象 包含 以 下 属性 。 


T 












































® params ( object ) 参数 以 键 / 值 形式 存储 ， 并 从 路 径 中 解析 对 应 的 URL 动态 段 来 获取 。 
@ isExact 一 一 如 果 URL 完全 匹配 ， 则 为 true (不 包含 结尾 字符 )。 

e@ _ path 一 一 (string ) 用 于 匹配 的 路 径 模式 ， 对 于 构建 谍 套 的 <Route> 组 件 非常 有 用 。 

® url (string ) 匹配 部 分 的 URL， 对 于 构建 般 套 的 cLink> 组 件 非常 有 用 。 





本 





我 们 感 兴趣 的 是 path 属性 。 在 AlbumsContainer 组 件 内 部 ，this.props.match.path 将 是 





本 








可 以 更 新 AlbumsContainer 组 件 内 包含 Album 的 Route 组 件 。 之 前 ，path 属性 的 值 是 /albums/ 





:albumId。 可 以 用 this.props.match.path 变量 替换 该 路 径 的 根 目 录 ( /albums )。 








首先 声明 新 变量 matchPath : 


routing/music/client/src/components-complete/AlbumsContainer-2.js 








render() { 
if (!this.state.fetched) { 
return ( 
<div className='ui active centered inline loader' /> 
) 
} else { 
const matchPath = this.props.match.path; 


























接着 可 以 改变 Route 组 件 的 path 属性 来 使 用 这 个 变量 : 


routing/music/client/src/components-complete/AlbumsContainer-2.js 








dl 





<div className='ui ten wide column'> 
<Route 
path={“${matchPath}/:albumId*} 
render={({ match }) => { 
const album = this.state.albums.find( 
(a) => a.id === match.params.albumId 
); 


return ( 





























使 用 这 种 方法 ，AlbumsContainer 组 件 不 会 对 它 的 位 置 做 任何 假设 。 例 如 ， 我们 可 以 更 新 App 组 
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件 ， 使 AlbumsContainer 组 件 在 位 置 /匹配 ， 而 不 是 在 /albums 上 ， 且 AlbumsContainer 组 件 将 不 需 
要 任何 更 改 。 

我 们 希望 Album 组 件 中 的 “Close” 按 钮 链接 到 相同 的 路 径 。“ 关 闭 ” 一 个 专 加 
更 改 回 /albums 。 让 我 们 将 matchPath 属性 向 下 传递 给 Album 组 件 : 


routing/music/client/src/components-complete/AlbumsContainer-2.js 





















































意味 着 需要 将 位 置 








| 





return ( 
<Album 
album={album} 
albumsPathname={matchPath} 
/> 
六 








接着 在 Album.js 中 了 可 以 从 props 对 象 中 提取 albumsPathname 属性 : 


routing/music/client/src/components-complete/Album.js 








const Album = ({ album, albumsPathname }) => ( 








现在 ， 可 以 将 div 元 素 更 改 为 Link 组 件 ， 并 将 to 属性 设置 为 albumsPathname: 


routing/music/client/src/components-complete/Album.js 





























<div className='six wide column'> 
<p> 
{ 
“By ${album.artist.name} 
— ${album.year} 
— ${album.tracks.1length} songs. 
} 
</p> 
<Link 
to={albumsPathname} 
className='ui left floated large button' 
> 
Close 
</Link> 








让 我 们 对 verticalMenu 组 件 采 用 相同 的 处 理 方式 。 切 换 回 AlbumsContainer.js， 把 
albumsPathname 属性 传递 给 VerticalMenu 组 件 : 

















routing/music/client/src/components-complete/AlbumsContainer-2.js 





<div 
ClassName= 'ui six wide column' 
style={{ maxWidth: 250 }} 


<VerticalMenu 
albums={this.state.albums} 
albumsPathname={matchPath} 
/> 


</div> 
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下 面 可 以 用 这 个 属性 来 修改 Link 组 件 的 to 属性 : 


routing/music/client/src/components-complete/VerticalMenu-2.js 

















const VerticalMenu = ({ albums, albumsPathname }) => ( 
<div className='ui secondary vertical menu'> 
《<div className='header item'> 
Albums 
</div> 
{ 
albums.map((album) => ( 
<Link 
to={“${albumsPathname}/${album.id}`} 
className=' item'" 
key={album. id} 
> 
{album.name} 
</Link> 
)) 
} 
</div> 


5 














通过 隔离 指定 位 置 的 路 径 名 , 可 以 使 应 用 程序 在 未 来 的 路 由 更 改 中 变 得 更 加 灵活 。 在 这 次 更 新 中 ， 





我 们 唯一 需要 在 应 用 程序 中 指定 /albums 的 位 置 是 App 组 件 。 
试 试看 





保存 Album. js， 并 在 应 用 程序 运行 后 访问 /albums。 点 击 一 个 专辑 来 打开 它 ， 接 着 点 击 “Close” 





按钮 ， 它 将 通过 把 位 置 更 改 回 /albums 来 进行 关闭 。 


“Close” 按 钮 能 正常 工作 后 ， 在 继续 实现 登录 和 注销 功能 之 前 ， 我 们 可 以 对 界面 进行 改进 。 
当 一 个 专辑 打开 时 ， 如 果 侧 边 栏 能 显示 哪个 专辑 是 活动 的 就 好 了 见 图 9-21 )。 





Albums 


[| 


Daydream Nation 


Remain In Light 


Paul's Boutique 


PET 





TT 


Murmur 


# Song 


1 Debaser 














By Pixies - 1989 - 15 
sonNBs 


Close 


© 


2:53 


图 9-21 VerticalMenu 组 件 使 用 浅 色 的 高 亮 来 显示 哪个 专辑 处 于 活动 状态 








下 面 来 实现 这 个 功能 。 
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9.3.6 ”使 用 NavLink 组 件 实现 动态 菜单 项 












































目前 ,垂直 菜单 中 的 所 有 菜单 项 都 有 item 类 。 在 Semantic UI 的 垂直 菜单 中 ， 可 以 将 活动 项 的 类 
设置 为 active item 使 其 高 亮 显 示 。 














如 何 知道 一 张 专辑 是 否 为 “活动 ”状态 ”此 状态 会 在 URL 中 维护 。 如 果 专 辑 的 id 与 URL 中 的 
:albumId 匹配 ， 我 们 就 知道 该 专辑 是 活动 的 。 


鉴于 此 ， 可 以 提出 以 下 解决 方案 : 


albums .map((album) => { 
const to = “`${falbumsPathname}/${falbum.id}`; 


const active = window.1location.pathname === to; 
return (<Link 


to={to} 
className={active ? 'active item' 
key={album.id} 

> 
{album.name} 

</Link> 

) 

}) 


我 们 通过 浏览 器 的 window. location API 获取 URL 的 路 径 名 。 如 果 浏 览 器 的 位 置 与 链接 的 位 置 
匹配 ， 则 将 链接 的 类 设置 为 active item。 

设计 活动 链接 的 样式 是 一 个 常见 的 需求 。 虽 然 上 1 
提供 了 一 个 内 置 的 策略 来 处 理 这 种 情况 。 

可 以 使 用 另 一 个 链接 组 件 


个 问题 。 当 























‘item'} 















































看 的 解决 方案 可 以 正常 工作 ， 但 react-router 














NavLink。NavLink 组 件 是 Link 组 件 的 一 个 特殊 版 本 ， 旨 在 解决 这 
NavLink 组 件 的 目标 位 置 与 当前 URL 匹配 时 ， 它 会 将 样式 属性 添加 到 被 泻 染 的 元 素 中 。 
可 以 这 样 使 用 NavLink 组 件 : 












































routing/music/client/src/components-complete/VerticalMenu-3.js 
<NavLink 
to={`${albumsPathname}/${album.id} } 
activeClassName="'active"' 
ClassName= "item 
key={album. id} 
> 












































当 NavLink 组 件 上 的 to 属性 匹配 当前 位 置 时 , 应 上 
的 组 合 。 在 这 里 它 将 按 需 演 染 active item 类 。 
然而 在 本 例 中 无 须 设 置 activeClassName 属性 
字符 串 ， 所 以 我 们 可 以 将 其 忽略 。 
在 文件 顶部 导入 NavLink 组 件 : 


routing/music/client/src/components-complete/VerticalMenu.js 





到 元 素 上 的 类 会 是 className 和 activeClassName 








。 因 为 activeClassName 的 默认 值 就 是 'active' 

















import { NavLink } from 'react-router-dom'; 
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然后 把 Link 组 件 换 成 NavLink 组 件 : 


routing/music/client/src/components-complete/VerticalMenu.js 





const VerticalMenu = ({ albums, albumsPathname }) => ( 
<div className='ui secondary vertical menu > 
<div className='header item'> 
Albums 
</div> 
{ 
albums.map((album) => ( 
<NavLink 
to={“${albumsPathname}/${album.id}*} 
className='item" 
key={album.id} 


{album.name} 
</NavLink> 


)) 








NavLink 组 件 使 链接 样式 化 变 得 简单 。 当 你 需要 此 功能 时 ， 请 使 用 NavLink 组 件 ， 但 不 需要 时 ， 
请 坚持 使 用 Link 组 件 。 


1. 试 试看 
保存 VerticalMenu. js。 在 浏览 器 中 ， 垂 直 菜 单 会 以 灰色 背景 来 反映 活动 的 专辑 ， 见 图 9-22。 


时 旧时 国 ReactApp x 
€ CG | © localhost:3000/albums/4Mw9Gcu1L77JaipXdwrq1Q 让 | : 
Logout 
Fullstack Music 


Albums 


Daydream Nation 
ByREM.-1983-12 


son 
Remain In Light 


Paul's Boutique Close 


Doolittle 





Murmur 


天 Song 9 

1 Radio Free Europe 4:05 
2 Pilgrimage 4:30 
3 Laughing 3:58 
4 Talk About The Passion 3:24 
5 Moral Kiosk 3:32 
6 Perfect Circle 3:30 
Catapult 3:55 








图 9-22 ”菜单 中 高 亮 显示 的 活动 专辑 
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在 继续 实现 登录 和 注销 功能 之 前 ， 让 我 们 处 理 最 后 一 件 事 。AlbumsContainer 组 件 匹配 的 位 置 是 
/albums。 当 用 户 访问 /时 ， 如 果 他 们 被 重 定向 到 /albums 就 好 了 。 下 面 就 把 这 个 功能 加 上 。 

2. 为 根 路 径 添加 重 定向 

在 App.js 中 ,首先 导入 Redirect 组 件 : 


routing/music/client/src/components-complete/App-3.js 
































import { Route, Redirect } from 'react-router-dom'; 








然后 就 可 以 将 Redirect 组 件 添加 到 App 组 件 的 输出 中 。 我 们 希望 Route 组 件 精确 地 匹配 /路 径 : 


routing/music/client/src/components-complete/App-3.js 





<div className='row'> 
<Route path='/albums' component={AlbumsContainer} /> 


<Route exact path='/' render={() => ( 
<Redirect 
to= '/albums' 
/> 
)} /> 
</div> 
































el 





回想 一 下 , 这 里 的 exact 属性 是 必要 的 ,否则 , 模式 /将 与 每 个 路 由 匹配 , 包括 /albums 和 /login。 
3. 试 试看 

保存 App. js。 在 浏览 器 中 访问 /路 径 ， 位 置 会 重 定向 到 /albums ， 上 是 专辑 列表 的 垂直 菜单 会 浑 染 。 
我 们 已 看 到 一 些 React Router 的 组 件 在 稍微 复杂 一 点 的 界面 中 工作 : 

。 将 一 个 组 件 与 一 个 动态 URL 进行 匹配 ; 
e 使 用 match 参数 中 的 一 些 属性 ， 并 设置 到 Route 组 件 的 目标 组 件 上 ; 
e@ 将 /albums 路 径 名 从 App 组 件 向 下 传递 到 子 组 件 ， 这 是 一 个 最 佳 实践 ; 
e@ 使 用 NavLink 组 件 泻 染 样式 化 的 链接 元 素 。 


让 我 们 更 进一步 。 在 下 一 他， 我 们 将 为 应 用 程序 实现 一 个 伪 身 份 验证 系统 ; 探讨 一 种 策略 ， 在 用 
户 没 有 登录 的 情况 下 ， 它 可 以 很 好 地 防止 他 们 访问 某 些 位 置 。 


9.4 ”支持 身份 验证 的 路 由 


如 之 前 我 们 在 研究 API 端点 /api/albums 时 所 见 ， 这 个 端点 需要 一 个 令 牌 才能 访问 。 目 前 ,我们 
是 通过 getAlbums( ) 方 法 在 每 个 请 求 发 出 之 前 手动 设置 令 牌 来 作弊 的 : 


routing/music/client/src/components-complete/AlbumsContainer-2.js 











































































































getAlbums = () => { 
client.setToken( 'D6W69PRgCoDKgHZGJmRUNA ' ) ; 
client.getAlbums(ALBUM_IDS) 
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为 了 模拟 更 真实 的 身份 验证 流程 ,我 们 需要 从 客户 端 应 用 程序 中 删除 令 牌 的 字符 串 文 本 。 我 们 应 
该 让 应 用 程序 向 API 的 /api/1ogin 端点 发 出 请 求 。 如 我 们 所 见 , 为 了 简单 起 见 ，API 不 需要 用 户 名 或 
密码 。 但 是 ， 为 了 模拟 实际 的 登录 端点 ， 它 需要 返回 一 个 令 牌 。 我 们 可 以 在 本 地 存储 该 令 牌 ， 并 在 后 
续 请 求 中 使 用 它 。 

































































9.4.1 Client 库 


与 应 用 程序 一 起 打包 的 是 一 个 客户 端 库 , 它 位 于 client/src/Client .js 中 。Client 库 拥有 与 服 
务 右 API 交互 所 需 的 所 有 方法 。 

Client 库 有 一 个 login() 方 法 , 它 会 执行 对 /api/1ogin 的 请 求 并 存储 令 牌 。login( ) 函数 会 执行 
该 请 求 ， 并 检查 以 确保 它 返回 的 是 预期 的 261 状态 码 ， 接 着 解析 json 响应 值 ， 然 后 使 用 setToken() 
函数 存储 令 牌 : 

routing/music/client/src/Client.js 

login() { 
return fetch('/api/login', { 
method: 'post', 
headers: { 
accept: 'application/json', 
让 
}) .then(this.checkStatus ) 


.then(this.parseJson) 
.then((json) => this.setToken( json.token)); 






















































































} 





setToken( ) 会 将 令 牌 存储 在 localStorage 中 : 


routing/music/client/src/Client.js 





setToken(token) { 
this.token = token; 


if (this.useLocalStorage) { 
localStorage.setItem(LOCAL_STORAGE_KEY，token ) ; 
} 
} 











当 应 用 程序 加 载 时 ，Client 首先 尝试 从 localStorage 加 载 令 牌 。 令 牌 会 被 无 限期 地 保存 在 
localStorage 中 ， 且 不 会 过 期 。 因 此 ， 用 户 只 有 在 执行 注销 时 才 会 退出 应 用 程序 。 


可 以 使 用 client 库 实 现 的 1ogout() 函数 来 完成 注销 : 


routing/music/client/src/Client.js 












































logout() { 
this .removeToken( ); 


} 





removeToken( ) 函数 会 让 令 牌 无 效 ， 并 将 其 从 localStorage 中 移 除 : 
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routing/music/client/src/Client.js 





removeToken() { 
this.token = null; 


if (this.useLocalStorage) { 
localStorage .TemoveItem(LOCAL_STORAGE_KEY ) ; 
} 
} 








了 解 了 我 们 将 要 使 用 的 client 库 的 函数 之 后 ， 让 我 们 首先 添加 一 个 新 的 登录 组 件 。 
9.4.2 ”实现 登录 功能 


正如 我 们 在 应 用 程序 的 完整 版 本 中 看 到 的 那样 ,Login 组 件 只 显示 一 个 “Login” 按 钮 。 点 击 此 按 
钮 将 触发 登录 过 程 。 我 们 希望 在 登录 过 程 中 显示 加 载 指 示 需 〈 见 图 9-23 )。 




















See/ >x 证 React OO@ /Dr x React 
< GC | © localhost:3000/ogin 廊 | ! 万 CG © localhost:3000/albums 冶 | 上 2 
Fullstack Music Login Fullstack Music login 
Fullstack Music Fullstack Music 

a 

















图 9-23 点 击 Login 组 件 的 “Login” 按 钮 
打开 Login.js， 此 文件 包含 登录 组 件 的 脚手架 。 我 们 将 使 用 状态 属性 1oginInProgress 来 表示 
登录 是 否 正 在 进行 ; 使 用 状态 中 的 另 一 个 属性 snouldRedirect 来 表示 登录 过 程 是 否 已 完成 ， 以 及 组 
件 是 否 应 该 重 定向 到 /albums。 下 面 我 们 声明 初始 状态 和 performLogin( ) 函数 : 


routing/music/client/src/components-complete/Login-1.js 
































class Login extends Component { 
state = { 
loginInProgress: false, 
shouldRedirect: false, 


}; 


performLogin = () => { 
this.setState({ loginInProgress: true }); 
client.login().then(() => ( 
this.setState({ shouldRedirect: true }) 
)); 
}; 
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我 们 将 1oginInProgress 和 shouldRedirect 状态 属性 的 初始 值 设 置 为 false。 


在 performLogin( ) 也 数 中 ,我 们 首先 将 loginInProgress 的 值 转换 为 true。 当 client.login() 
执行 完 时 ， 我 们 将 shouldRedirect 状态 属性 的 值 转换 为 true。 无 须 将 1oginInProgress 的 值 改 回 
false， 因 为 组 件 不 管 怎 样 都 会 立即 重 定向 。 

在 render() 函数 中 , 我 们 首先 检查 组 件 是 否 应 该 重 定向 。 如 果 需 要 , 则 泻 染 一 个 Redirect 组 件 。 
否则 ， 可 以 使 用 loginInProgress 来 决定 是 显示 “Login” 按 钮 还 是 显示 加 载 指示 器 : 


routing/music/client/src/components-complete/Login-1.js 







































































render() { 
if (this.state.shouldRedirect) { 
return ( 
<Redirect to='/albums' /> 
好 
} else { 
return ( 
<div className='ui one column centered grid'> 
<div className='ten wide column'> 
<div 
className='ui raised very padded text container segment" 
style={{ textAlign: 'center' }} 


<h2 className='ui green header'> 
Fullstack Music 
</h2> 
{ 
this.state.loginInProgress ? ( 
<div className='ui active centered inline loader' /> 
) A 
<div 
className='ui large green submit button' 


onClick={this.performLogin} 
> 


Login 
</div> 
) 
} 
</div> 
</div> 
</div> 


> 
} 
} 





保存 Login.js。 为 了 测试 Login 组 件 ， 我们 需要 添加 Logout 组 件 。 


注销 不 需要 APIi a client .1ogout() 函 数 ， 它 会 立即 市 除 本 地 存储 的 令 牌 。 可 以 在 
constructor( ) 函数 中 执行 这 个 调用 。 接 着 我 们 将 重 定 向 到 登录 路 径 ， 即 /login。 


首先 ,在 Logout .js 中 ， 从 react-router 库 导 和 Redirect 组 件 
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routing/music/client/src/components-complete/Logout.js 





import React, { Component } from 'react'; 


import { Redirect } from 'react-router-dom'; 





接着 将 填写 Logout 组 件 : 


routing/music/client/src/components-complete/Logout.js 








class Logout extends Component { 


constructor(props) { 
super(props); 


client.1ogout(); 


} 


render() { 
return ( 
<Redirect 
to='/1login’ 
/> 





保存 Logout .js。 完 成 Login 和 Logout 组 件 后 ， 只 需 将 
首先 需要 导入 组 件 : 


// “App.js 顶部 

import TopBar from './TopBar'; 

import AlbumsContainer from './AlbumsContainer'; 
import Login from './Login'; 

import Logout from './Logout'; 


然后 为 它们 添加 Route 组 件 


routing/music/client/src/components-complete/App-4.js 








T 


它们 添加 到 App 组 件 中 即 可 。 





<div ClassName= TOW > 
<Route path='/albums' component={AlbumsContainer} /> 


<Route path='/login' component={Login} /> 
<Route path='/logout' component={Logout} /> 


<Route exact path='/' render={() => ( 


<Redirect 
廿 o= ' /albums 
/> 
)} /> 


</div> 
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最 后 从 AlbumsContainer 组 件 的 getAlbums( ) 函数 中 删除 手动 对 setToken( ) 函数 的 调用 : 


getAlbums() { 
elient.setToken( 'DEWE9PRgCeoDKgHZGJmRUNA' ) 
client.getAlbums(ALBUM_IDS) 
LA se 

Ly 


保存 AlbumsContainer. js。 删除 setToken() 后 ， 现 在 可 以 测试 登录 功能 是 否 正 常 。 当 我 们 
在 /login 位 置 点 击 “Login” 按 钮 时 , 它 应 该 会 触发 对 /api/1ogin 的 API 调 用 并 设置 响应 中 返回 的 
令 牌 。 

TopBar 组 件 负 责 泻 染 页 面 顶 部 的 菜单 栏 。 因为 我 们 一 直 都 是 登录 着 的 , 所 以 最 右边 的 按钮 会 显示 
“Logout”。TopBar 组 件 使 用 client 库 中 的 isLoggedIn( ) 函数 来 检查 用 户 是 否 已 登录 。 这 个 函数 会 检 
查 令 牌 是 否 存在 ， 我 们 将 根据 这 个 布尔 值 来 决定 是 泻 染 “Login” 链 接 还 是 “Logout” 链 接 。 


routing/music/client/src/components/TopBar.js 

















































































































<dqiv className='right menu'> 
{ 
client.isLoggedIn() ? ( 
<Link className='ui item' to='/logout'> 
Logout 
</Link> 
Pent 
<Link className='ui item' to='/login'> 
Login 
</Link> 
) 
} 


</div> 





考虑 到 这 一 点 ， 下 面 来 测试 这 个 应 用 程序 。 
试 试看 
我 们 将 采取 一 些 步骤 来 确保 登录 和 注销 能 正常 工作 。 

(1) 在 /albums 位 置 加 载 页 面 ， 可 以 看 到 所 有 的 专辑 。 在 页 面 的 右上 角 ， 可 以 看 到 “Logout” 按 钮 。 
CO) 点 击 “Logout” 按 钮 ， 页 面 应 该 被 重 定向 到 /login。 

(3) 不 点 击 “Login” 按 钮 ， 手 动 输入 /albums 路 径 。 

注销 后 ， 当 我 们 访问 /albums 时 ， 会 在 页 面 上 看 到 一 个 旋转 器 图 标 无 限期 地 转圈 ( 见 图 9-24 )。 
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四 四 四 /ReactApp x (CE | 
[i © localhost:3000/albums 人 |: 
Fullstack Music i 
— 








图 9-24 页面 无 限期 地 挂 着 
打开 控制 台 ， 可 以 看 到 应 用 程序 正在 抱怨 它 收 到 了 一 个 从 API 返回 的 463 错误 ( 见 图 9-25 )。 

















oon / 国 React App x AAA React | 
€ GC | © localhost:3000/albums 女 | 
Logi 
Fullstack Music 
r 


民 器 Elements Console Sources Network Timeline Profies Application Security Audits @2 : x 





© top v DD Preservelog 
© * GET http://localhost:3000/api/albums?ids=2304F21CDWiGd33tFN3ZgI, 3AQgdwMNCiN7awX.. Client.is:115 
rVyaSfRxdisPFDMOS5, 6ymZBbRSmzAvoSGmwAFoxm, AMw9Gcu1L 7JaipXdwrqlQ&token=null 403 (Forbidden) 
Error: HTTP Error Forbidden(.) Client, is:150 
Client. is:147 











四 PUncaught (in promise) Error: HTTP Error Forbidden(..) 


> | [ 


图 9-25 ”控制 台 错 误 








太 好 了 。API 拒 绝 了 我 们 的 请 求 , 因为 它 没有 包含 令 牌 。 Logout 组 件 完成 了 它 的 工作 并 删除 了 令 牌 。 
现在 ， 我 们 应 该 能 够 登录 并 再 次 查看 这 个 页 面 。 


(1) 点 击 右上 角 的 “Login” 按 钮 。 
(2) 在 /login 页 面 ， 点 击 “Login” 按 钮 。 
(3) 页 面 将 被 重 定向 到 /albums 。 现 在 应 该 可 以 再 次 看 到 专辑 了 。 
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当 用 户 没有 登录 就 访问 /albums 时 ， 应 用 程序 会 静默 失败 。 相 反 ， 我 们 应 该 将 用 户 重 定 向 到 /login。 

如 果 用 户 访问 另 一 个 页 面 ( 比如 /albums/1DWwb ) 会 发 生 什 么 呢 ? 在 这 个 实例 中 ， 我 们 也 应 该 将 
用 户 重 定向 到 /login 。 当 登录 完成 时 ， 最 好 的 体验 是 我 们 将 用 户 重 定向 到 他 们 原来 的 位 置 
( /albums/1DWWb )。 


我 们 将 依次 讨论 这 些 问 题 。 


应 用 程序 快 完成 了 ! 我 们 正在 向 一 个 真实 的 身份 验证 流程 靠拢 , 但 还 需 确定 一 个 需要 改进 的 地 方 。 








YY 









































9.4.3 ”PrivateRoute 高 阶 组 件 
如 果 
































户 访问 了 /albums 下 的 一 个 页 面 ， 但 没有 登录 ， 我 们 希望 将 其 重 定向 到 登录 页 再 
可 以 使 用 客户 端 库 中 的 isLoggedIn( ) 函 数 在 AlbumsContainer 组 件 中 实现 类 似 的 东西 : 


// 在 AlbumsContainer 组 件 中 
render() { 
// 这 样 做 就 可 以 了 
if (!client.isLoggedIn()) { 
return ( 
<Redirect to='/login' /> 
六 
} 
} 





O 
























































这 对 于 现在 的 目的 来 说 是 可 行 的 。 但 是 ， 随 着 应 用 程序 的 增长 ,我 们 可 能 需要 许多 页 面 及 其 组 成 
组 件 来 包装 这 个 重 定向 。 


这 就 是 React Router 的 可 组 合 性 派 上 用 场 的 地 方 。 因 为 React Router 中 的 所 有 东西 都 是 组 件 ， 所 
以 我 们 可 以 编写 高 阶 组 件 ， 将 React Router 的 元 素 封 装 在 自 定 义 的 功能 




















高 阶 组 件 是 包装 了 另 一 个 组 件 的 React 组 件 。 这 个 模式 是 扩展 或 更 改 现 有 组 件 功 能 的 一 种 强大 机 第 
如 我 们 在 编写 Route 组 件 时 所 见 ， 它 就 是 高 阶 组 件 的 一 个 示例 。 
在 本 例 中 ， 我 们 可 以 编写 一 个 新 组 件 : PrivateRoute。PrivateRoute 组 件 会 像 我 们 自己 定制 风 


格 的 Route 组 件 。 我 们 将 看 到 ,我 们 将 使 用 它 来 扩展 和 聚焦 Route 组 件 的 功能 。 在 应 用 程序 中 任何 需 
要 Route 组 件 断 言 用 户 已 登录 的 地 方 ， 都 可 以 使 用 PrivateRoute 组 件 进行 蔡 换 。 在 底层 ， 它 将 同时 


使 用 Route 组 件 和 Redirect 组 件 进 行 操作 。 





一 
O 








































































































打开 App. js， 让 我 们 导入 并 使 用 PrivateRoute 组 件 以 查看 其 用 法 ， 然 后 构建 该 组 件 。 
在 App .js 的 顶部 导入 它 : 


routing/music/client/src/components-complete/App-5.js 














import TopBar from './TopBar'; 

import PrivateRoute from './PrivateRoute'; 
import AlbumsContainer from './AlbumsContainer'; 
import Login from './Login'; 

import Logout from './Logout'; 
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我 们 希望 PrivateRoute 组 件 具 有 与 Route 组 件 相同 的 接口 。/albums 是 唯一 需要 用 户 登 录 的 路 























1。 对 于 /albums ， 我 们 将 把 Route 组 


[ 件 换 成 PrivateRoute 组 件 : 


routing/music/client/src/components-complete/App-5.js 





<Switch> 
<PrivateRoute path='/albums' component={AlbumsContainer} /> 
<Route path='/login' component={Login} /> 
<Route path='/logout' component={Logout} /> 





打 攻 





同 检 





F PrivateRoute.js， 该 组 件 的 脚手架 已 存在 。 
， 高 阶 组 件 是 返回 包装 了 新 功能 的 组 件 的 函数 。 为 了 理解 这 一 点 ， 让 我 们 考虑 一 下 丸 














0 果 


PrivateRoute 组 件 所 做 的 只 是 返回 Route 组 件 ， 它 会 是 什么 样子 。 这 个 实现 将 与 直接 使 用 Route 组 


件 相 同 : 

















routing/music/client/src/components-complete/PrivateRoute-1.js 





const PrivateRoute = (props) => ( 


芝 


>); 


Route {...props} /> 





在 本 例 中 ，PrivateRoute 组 件 返 回 了 一 个 Route 组 件 ， 并 将 其 所 有 属性 传递 给 Route 组 件 。 这 




















个 版 本 的 PrivateRoute 组 件 不 是 很 有 
因为 PrivateRoute 组 件 所 做 的 一 切 只 是 泻 染 Route 组 件 ， 如 果 我 们 现在 保存 PrivateRoute 


并 重新 加 载 应 用 程序 ， 一 切 都 会 像 以 前 一 样 工作 。 





用 ， 却 是 高 阶 组 件 的 最 简单 实现 。 






































这 


.js 


我 们 最 终 想 要 做 的 是 让 PrivateRoute 组 件 演 染 提供 给 它 的 组 件 (component 属性 ), 并 在 用 户 没 
有 登录 时 重 定向 。 如 下 所 示 : 


routing/music/client/src/components-complete/PrivateRoute-2.js 








const PrivateRoute = (props) => ( 
Route {...props} render={(props) => ( 


) 
); 


client.isLoggedIn() ? ( 
// 演 染 属性 组 件 

todo 

入 

// 泻 娄 重 定向 


todo 


) 





) 
} /> 











我 们 像 以 前 一 样 把 所 有 的 属性 传递 给 Route 组 件 。 但 这 次 ,我们 指定 了 一 个 render( ) 函数 。 


记 住 ， 可 以 在 Route 组 件 上 设置 component 属性 ， 也 可 以 传递 一 个 函数 给 render 属性 。 
在 这 个 render() 函数 中 ， 我 们 将 使 用 client .isLoggedIn( ) 函数 进行 判断 。 这 个 布尔 值 将 告 


























请 




















我 们 应 该 泻 染 传递 给 PrivateRoute 的 组 件 还 是 执行 重 定向 。 





这 是 

















有 有 一 种 方法 。 首 先 ， 可 以 使 用 


解构 语法 来 获取 参数 : 











Sf 诉 
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的 所 有 








其 他 的 属 








届 性 。 
接 下 来 把 所 有 的 属 牧 


routing/music/client/src/components-complete/PrivateRoute-3.js 
const PrivateRoute = ({ component, 
我 1 


门 获 取 了 component 属性 





. .Test }) => ( 


E， 然 后 使 用 扩 




















展 语法 获取 .. .rest， 它 用 来 设置 PrivateRoute 组 件 
E (rest ) 传递 给 Route 组 件 : 
routing/music/client/src/components-complete/PrivateRoute-3.js 
const PrivateRoute = ({ component, 











如 及 


<Route {...rest} render={(props) => (人 
民 插 




















I 嘱 





..rest }) => ( 
已 登录 ， 我 们 希望 演 染 该 组 件 : 





client.isLoggedIn() ? ( 
React .createElement(component, props) 
A( 


<Route {...rest} render={(props) => (人 
否则 要 执行 重 定向 : 


routing/music/client/src/components-complete/PrivateRoute-3.js 





routing/music/client/src/components-complete/PrivateRoute-3.js 
Le 
<R 





edirect to={{ 
pathname: 
}} /> 


'/login', 
) 








完整 的 PrivateRoute 组 件 如 下 所 示 : 


. .Test }) => ( 
J 
<R 


routing/music/client/src/components-complete/PrivateRoute-3.js 
const PrivateRoute = ({ component, 
React .createElement(component, props) 


<Route {...rest} render={(props) => (人 
client.isLoggedIn() ? ( 





edirect to={{ 
pathname: 
}} /> 
) 
)} /> 


'/login’', 
); 





保存 PrivateRoute. js。 因 为 已 在 App 组 件 
以 我 们 已 准备 好 在 浏览 器 中 进行 测试 。 


@ : 
我 











Pp 使 用 PrivateRoute 组 件 来 匹配 /albums 端点 ， 所 
开始 接触 高 阶 组 件 会 很 难 理解 。 如 果 你 在 使 用 PrivateRoute 组 件 时 遇 到 困难 ， 
们 建议 你 稍 后 再 返回 到 此 组 件 并 进行 尝试 。 
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试 试看 
在 应 用 程序 打开 的 情况 下 ， 执 行 以 下 步 又 以 验证 一 切 是 否 正常 : 








(1) 点 击 右 上 角 的 “Logout” 





按钮 ; 


(2) 页 面 被 重 定向 到 /1ogin; 


(3) 现在 ， 当 访问 /albums 时 ， 
(4) 当 我 们 登录 时 ， 


我 们 差 




















应 | 








j 程 序 应 该 会 重 定向 到 /1ogin; 








页 面 将 被 重 定向 到 /albums， 





且 这 一 Y 




















不 多 完成 了 所 有 的 事情 。 如 果 





9.4.4 ” Redirect 组 件 的 状态 


如 果 用 
录 后 ， 我 们 应 
来 自 哪 里 。 





React Router 的 Redirect 组 件 允 许 
用 。 可 以 让 PrivateRoute 组 件 中 的 Redirect 组 件 根据 
Login 组 件 从 该 状态 读 取 信 ， 
打开 PrivateRoute.js。 在 Redirect 组 件 中 传递 此 state， 包 


























户 因 为 没有 登录 而 无 法 访问 站 点 上 的 页 画 





完成 我 们 提 到 过 的 最 后 一 件 事 





ij， 那么 我 们 需要 将 大 

















应 该 把 他 们 重 定 向 回 其 来 源 页 1 





自 


CC, 











面 。 为 了 做 到 这 一 点 ，Login 组 件 需 要 一 些 方法 来 知道 








我 们 在 














次 它 能 正常 演 染 。 


情 就 更 好 了 。 


4 重 定向 到 /1ogin。 当 用 户 登 
用 户 


























该 状态 将 在 下 一 个 位 置 可 



































以 确定 将 月 





执行 重 定 向 时 设置 一 些 状态 ， 
日 户 发 送 到 何 处 。 








routing/music/client/src/components-complete/PrivateRoute.js 


] 户 的 位 置 设置 此 状态 。 我 们 将 看 到 如 何 让 


0 下 所 示 : 
































<Redirect to={{ 
pathname: '/login', 
state: { from: props.location }, 
}} /> 
可 以 任意 设置 这 个 状态 。 在 重 定向 之 前 ,我们 将 from 属性 设置 为 应 用 程序 的 位 置 。 因 此 ， 如 果 用 

















户 试图 访问 /albums/1DWWb4Q39mp1T3NgyscowF ， 那 么 state. from 会 被 设置 为 这 个 值 。 


下 面 在 


函数 redirectPath( ) ， 

















Login. js 中 使 用 




















并 调用 











这 个 状态 来 确定 用 户 登 录 后 的 重 定向 
该 state 将 在 Route 组 件 提 供 的 location 属 
它 来 读 取 以 下 状态 : 





位 置 。 


























routing/music/client/src/components-complete/Login.js 








性 下 可 用 。 让 我 们 在 Login 组 件 上 创建 一 个 新 的 类 





redirectPath = () => { 
const locationState = this.props.1location.state; 
const pathname = ( 
locationState && locationState.from && locationState.from.pathname 


); 
}; 


return pathname || 


'/albums'; 


render() { 





这 个 函数 读 取 位 置 的 state 


1 
变量 。 





它 将 默认 为 /albums。 


如 果 它 看 到 一 个 from 








三 
册 | 
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现在 可 以 在 Redirect 组 件 中 使 用 它 


routing/music/client/src/components-complete/Login.js 











if (this.state.shouldRedirect) { 
return ( 
<Redirect to={this.redirectPath()} /> 

















试 试看 
现在 重 定向 中 包含 了 状态 ， 注 销 的 用 户 在 登录 后 将 被 重 定向 到 他 们 试图 访问 的 页 面 。 
为 了 测试 这 一 点 ， 我 们 需要 在 浏览 器 中 执行 以 下 操作 。 














(1) 访问 其 中 一 个 专辑 。 

(2) 复制 完整 的 URL (例如 http://localhost:3000/albums/2304F21GDWiGd33tFN3ZgI )。 
(3) 点 击 “Logout” 按 钮 。 

(4) 粘贴 完整 的 URL 并 按 回 车 键 (也 可 以 点 击 后 退 按 钮 )。 

(5) 浏览 器 试图 访问 一 个 受 PrivateRoute 组 件 保 护 的 页 面 ， 页 国 
(6) 点 击 “Login” 按 钮 。 

(7) 登录 完成 后 ， 页 面 会 被 重 定向 到 我 们 试图 访问 的 位 置 ， 而 不 是 被 重 定 问 到 /albums。 























会 被 重 定向 到 /login。 





























9.5 回顾 一 下 


在 本 章 中 , 我 们 了 解 了 如 何 使 用 React Router 中 的 组 件 为 Web 应 用 程序 提供 快速 、JavaScript 驱动 
的 导航 。 当 用 户 在 浏览 网 站 时 ,我们 可 以 防止 用 户 的 浏览 器 做 完整 的 页 面 加 载 。 我 们 可 以 构建 可 共享 
且 对 用 户 友好 的 URL， 而 应 用 程序 所 增加 的 复杂 性 很 小 。 
React Router 的 声明 式 组 件 驱 动 范式 在 路 由 领域 是 独一无二 的 。 虽 然 这 通常 意味 着 我 们 必须 重新 
思考 如 何 处 理 路 由 的 解决 方案 ， 但 好 处 是 我 们 使 用 的 是 熟悉 的 React 组 件 。 这 限制 了 React Router 的 
API 数 量 ， 并 最 大 程度 地 减少 了 “魔法 ”。 


进一步 阅读 


React Router 文 档 "包含 了 有 关 React Router 的 各 种 概念 的 几 个 重点 示例 。 在 撰写 本 文 时 , 示例 包括 
一 些 常 见 的 模式 ， 如 查询 参数 和 模糊 路 由 匹配 。 所 有 这 些 例 子 都 建立 在 本 章 的 基础 之 上 。 











































































































GD 参见 REACT TRAINING 网 站 的 REACT TRAINING/REACT ROUTER 页 面 。 

















Flux 和 Redux 介绍 








10.1 ”Flux 诞生 的 原因 


到 目前 为 止 ， 我 们 已 在 项 目 中 管理 了 React 组 件 内 部 的 状态 。 顶 级 的 React 组 件 管理 着 主 状态 。 
在 这 种 类 型 的 数据 架构 中 ， 数 据 向 下 流向 子 组 件 。 为 了 改变 状态 ， 子 组 件 需要 通过 调用 属性 函数 将 事 
件 向 上 传递 给 父 组 件 。 任 何 状态 的 变化 都 发 生 在 顶级 组 件 ， 然 后 再 向 下 流动 。 

使 用 React 组 件 管理 应 用 程序 状态 适用 于 各 种 应 用 程序 。 然 而 ， 随 着 应 用 程序 的 规模 和 复杂 性 的 
增长 ， 在 React 组 件 内 部 管理 状态 (或 组 件 状 态 范式 ) 会 变 得 很 麻烦 。 

一 个 常见 的 痛 点 是 用 户 交 互 和 状态 更 改 之 间 的 紧 耦 合 。 对 于 复杂 的 Web 应 用 程序 , 通常 单个 用 户 
交互 可 以 影响 状态 的 许多 不 同 且 离 散 的 部 分 。 

例如 ， 考 虑 一 个 管理 电子 邮件 的 应 用 程序 。 点 击 电子 邮件 会 影响 以 下 几 个 方面 : 

(1) 将 “ 收 件 箱 视图 ”( 电子 邮件 列表 ) 替换 为 “电子 邮件 视图 ”( 用 户 点 击 的 电子 邮件 ); 

(2) 将 电子 邮件 标记 为 本 地 已 读 ; 

(3) 本 地 减少 总 未 读 计 数 器 ; 

(4) 更 改 浏览 器 的 URL ; 

(5) 发 送 Web 请 求 以 将 电子 邮件 在 服务 器 上 标记 为 已 读 。 

顶级 组 件 中 处 理 用 户 点 击 电子 邮件 的 函数 必须 描述 发 生 的 所 有 状态 变化 ,这 将 使 得 单个 函数 负载 
大 量 的 复杂 性 和 职责 。 通 过 所 有 这 些 逻 辑 来 管理 应 用 程序 状态 树 的 许多 不 同 部 分 可 能 会 使 这 些 更 新 变 
得 难以 管理 日 容易 出 错 。 

Facebook 在 其 应 用 程序 中 已 遇 到 了 这 个 问题 以 及 其 他 架构 问题 。 这 促使 他 们 发 明了 Flux。 


10.1.1 “Flux 是 一 种 设计 模式 

Flux 是 一 种 设计 模式 。 在 Facebook ，Flux 的 前 身 是 另 一 种 设计 模式 ， 即 模型 -视图 -控制 器 
( Model-View-Controller，MVC )。MVC 是 在 桌面 和 Web 应 用 程序 中 流行 的 一 种 设计 模式 。 
在 MVC 中 ， 用 户 与 视图 的 交互 会 触发 控制 器 中 的 逻辑 。 控 制 需 指示 模型 如 何 进行 更 新 。 模 型 更 
新 后 ， 视 图 将 重新 演 染 。 
虽然 React 不 像 传统 的 MVC 实现 那样 拥有 三 个 独立 的 “角色 ”, 但 它 在 用 户 交 互 和 状态 更 改 之 间 
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存在 着 相同 的 耦合 。 
10.1.2” Flux 概述 
Flux 设计 模式 由 四 个 部 分 组 成 ， 构 成 了 单 向 的 数据 管道 ( 见 图 10-1 )。 








图 10-1 Flux 示意 图 





视图 分 派 用 于 描述 所 发 生 事 件 的 动作 。store 接收 这 些 动作 并 决定 应 该 进行 哪些 状态 更 改 。 在 状 
态 更 新 后 ， 新 状态 将 推送 到 视图 中 。 


回 到 电子 邮件 示例 , 在 Flux 中 不 再 有 一 个 单独 的 函数 来 处 理 电 子 邮 件 的 点 击 事件 , 用 于 描述 所 有 
状态 变化 。 相 反 ，React 会 通知 store( 通过 一 个 动作 ) 用 户 点 击 了 电子 邮件 。 接 下 来 的 几 章 将 介绍 ， 
我 们 可 以 通过 组 织 store 使 得 状态 的 每 个 独立 部 分 都 有 自己 处 理 更 新 的 逻辑 。 


除了 解 耦 交互 处 理 和 状态 更 改 之 外 ，Flux 还 有 以 下 一 些 优点 。 

拆 分 状态 管理 逻辑 

当 状 态 树 的 各 个 部 分 变 得 相互 依赖 时 ， 应 用 程序 中 的 大 多 数 状 态 通 常会 汇总 到 顶级 组 件 中 。Flux 
减轻 了 顶层 组 件 对 状态 人 任 ， 并 人 允许 你 将 状态 管理 分 解 为 隔离 的 、 较 小 的 且 可 测试 的 部 分 。 

React 组 件 更 简单 


某 些 状 态 由 组 件 管理 会 更 好 ， 比 如 鼠标 悬 停 时 激活 某 些 按钮 。 但 通过 外 部 来 管理 所 有 其 他 状态 ， 
可 以 使 React 组 件 变 成 简单 的 HTML 演 染 函数 ， 这 使 得 它们 变 得 更 小 、 更 易于 理解 旦 更 易于 组 合 。 

状态 树 和 DOM 树 之 间 不 匹配 

通常 ， 我 们 希望 用 不 同 于 显示 方式 的 表示 来 存储 状态 。 例 如 ， 我 们 可 能 想 让 应 用 程序 存储 一 条 
消息 (createdAt ) 的 时 间 戳 ， 但 在 视图 中 想 要 显示 一 种 更 加 人 性 化 的 表示 形式 ， 比 如 “23 分 钟 前 ”。 
我 们 将 看 到 Flux 使 我 们 能 够 在 向 React 组 件 提供 状态 之 前 执行 这 些 计算 , 而 不 是 让 组 件 拥有 所 有 用 于 
派生 数据 的 计算 逻辑 。 

下 一 章 将 深入 研究 复杂 应 用 程序 的 设计 以 体现 这 些 优势 。 在 此 之 前 ,我 们 将 在 一 个 基本 的 应 用 程 

序 中 实现 Flux 设计 模式 ， 这 样 就 可 以 回顾 Flux 的 基本 原理 。 



























































10.2 ”Flux 实现 








Flux 是 一 个 设计 模式 ， 而 不 是 一 个 特定 的 库 或 实现 。Facebook 已 开源 了 他 们 使 用 的 库 "。 这 个 库 





参见 GitHub 网 站 的 facebook/flux 页 面 。 
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提供 了 一 个 分 配器 和 一 个 store 的 接口 ， 我 们 可 以 在 应 用 程序 中 使 用 。 


但 Facebook 的 实现 并 不 是 唯一 的 选择 。 自 Facebook 开 始 与 社区 共享 Flux 以 来 , 社区 也 做 出 了 回应 
并 编写 了 大 量 不 同 的 Flux 实 现 “。 开 发 人 员 有 许多 今 人 信服 的 选择 。 


昌 然 可 用 的 选项 非常 多 ， 但 社区 出 现 了 一 个 受 喜欢 的 实现 : Redux。 





























10.3 Redux 


Redux 在 React 社 区 中 获得 了 广泛 的 欢迎 和 尊重 。 该 库 甚 至 赢得 了 Flux 创作 者 的 认可 。 
Redux 最 好 的 特性 是 简单 。 除 去 注释 和 完整 性 检查 ，Redux 大 约 只 有 100 行 代码 。 


由 于 其 简单 性 ,在 本 章 我 们 将 自己 实现 Redux 核心 库 。 我 们 将 使 用 小 型 示例 应 用 程序 来 查看 所 有 
内 容 是 如 何 结合 在 一 起 的 。 


接 下 来 的 章节 中 将 在 此 基础 上 构建 一 个 功能 丰富 的 消息 传递 应 用 程序 ， 该 应 用 程序 与 Facebook 类 
似 。 我 们 将 看 到 使 用 Redux 作为 应 用 程序 的 框架 s 是 如 何 让 应 用 程序 能 够 处 地 不 断 增 加 的 功能 复杂 性 的 。 


Redux 的 关键 思想 

在 本 章 中 ， 我 们 将 熟悉 Redux 的 每 个 关键 思想 ， 具 体 如 下 所 示 : 
应 用 程序 的 所 有 数据 都 在 一 个 名 为 状态 的 数据 结构 中 ， 状 态 保 存在 store 中 ; 
应 用 程序 从 store 中 读 取 状态 ; 
状态 永远 不 会 在 store 外 直接 改变 ; 
视图 会 发 出 描述 所 发 生 事件 的 动作 ; 
将 旧 的 状态 和 动作 通过 一 个 函数 (reducer ) 进行 组 合 来 创建 新 状态 。 
目前 这 些 关 键 思 想 可 能 有 点 睡 涩 难怪， 但 你 会 在 本 章 中 逐步 理解 它们 。 

本 章 的 其 余部 分 将 涉及 Redux。 因 为 Redux 是 Flux 的 一 个 实现 ， 所 以 许多 适用 于 

@ Redux 的 概念 同样 也 适用 于 Flux。 


虽然 Flux 的 创建 者 认可 Redux， 但 Redux 并 不 是 严格 的 Flux 实现 。 可 以 在 Redux 
网 站 上 阅读 其 中 的 细微 差别 。 


10.4 构建 一 个 计数 器 


我 们 将 通过 构建 一 个 简单 的 计数 器 来 探索 Redux 的 核心 思想 。 现 在 , 我 们 只 关注 Redux 和 状态 和 
理 。 稍 后 将 介绍 Redux 是 如 何 连 接 到 React 视图 的 。 


10.4.1 准备 
在 本 书 代 码 中 ， 请 导航 到 redux/counter 目录 : 












































一 <: 
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人 参见 GitHub 网 站 的 voronianski/flux-comparison 页 面 。 
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$ cd redux/counter 

计数 器 的 所 有 代码 都 将 放 入 app.js 中 。 

因为 一 开始 关注 的 是 Redux 和 状态 管理 ， 所 以 我 们 将 在 终端 而 不 是 浏览 器 中 运行 代码 。 

这 两 个 项 目的 package. json 都 包含 babel-cli 包 。 如 之 后 的 “ 试 试 看 ”部 分 中 指出 的 ， 我 们 将 
使 用 babel-cli 附带 的 babel-node 命令 来 运行 代码 示例 : 


# 使 用 'babel-node' 命 邻 在 终端 中 运行 代码 的 例子 
$ ./node_modules/.bin/babel-node app.js 








下 面 在 redux/counter 目录 中 运行 npm install 来 安装 babel-cli: 
$ npm install 
10.4.2 ”概述 


我 们 的 状态 将 是 一 个 数字 ， 它 从 @ 开始 ， 而 动作 将 是 增加 或 减少 该 状态 。 从 Redux 示意 图 中 ， 可 
以 知道 视图 层 会 将 这 些 动 作 发 送 到 store ( 见 图 10-2 )。 











图 10-2 视图 发 送 递 增 动作 
当 store 接收 到 来 自视 图 的 动作 时 ， 它 会 使 用 一 个 reducer 函数 来 处 理 动作 。store 会 为 reducer 隆 
数 提供 当前 的 状态 和 动作 。reducer 函数 会 返回 新 的 状态 : 10 
// store 会 从 视图 接收 动作 
state = reducer(state, action); 


例如 ， 考 虑 一 个 当前 状态 为 5 的 store。 它 接收 一 个 递增 的 动作 ， 并 使 用 它 的 reducer 推导 出 下 一 
个 状态 ( 见 图 10-3 )。 

















6 


(下 一 个 状态 ) 





图 10-3 ”在 示例 的 store 内 部 
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我 们 将 通过 构建 Redux 的 reducer 来 开始 构建 计数 器 ， 然 后 将 逐步 了 解 Redux store。store 是 状态 
的 维护 者 ， 它 接收 动作 并 使 用 reducer 来 确定 状态 的 下 一 个 版 本 。 




















@ 虽然 我 们 从 状态 (一 个 数字 ) 的 简单 表示 开始 ， 但 下 一 章 将 处 理 更 复杂 的 状态 。 


10.4.3 ”计数 器 的 动作 

我 们 知道 计数 器 的 reducer 函数 会 接收 两 个 参数 一 一 state( 状态 ) 和 action (动作 )， 
的 状态 是 一 个 整数 。 但 动作 在 Redux 中 如 何 表示 呢 ? 

Redux 中 的 动作 是 对 象 ， 且 始终 有 一 个 type 属性 。 

递增 动作 对 象 如 下 所 示 : 


{ 
type: 'INCREMENT', 


} 
递减 动作 对 象 如 下 所 示 : 


{ 
type: 'DECREMENT', 


} 
可 以 想象 这 个 计数 器 应 用 程序 的 简单 界面 是 什么 样 的 ， 见 图 10-4。 





目 计数 带 









































图 10-4 ”计数 器 页 面 的 例子 





用 户 点 击 “-” 图 标 时 ， 视 图 将 把 递 


























当 用 户 点 击 “+” 图 标 时 ， 视 图 将 把 递增 动作 分 派 给 store; 当 
减 动 作 分 派 给 Store。 


者 计数 器 应 用 程序 的 界面 图 像 只 是 视 
程序 实现 一 个 视图 层 。 








图 的 一 个 可 能 的 外 观 示 例 。 我 们 不 会 为 这 个 应 用 





10.4.4 ”递增 计数 器 

让 我 们 开始 编写 reducer 函数 。 我 们 将 从 处 理 递 增 动 作 开 始 。 

计数 器 的 reducer 函数 接收 state 和 action 两 个 参数 ， 并 返回 state 的 下 一 个 版 本 。 当 reducer 
接收 到 一 个 INCREMENT 的 动作 时 ， 它 应 该 返回 state + 1。 
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在 app.js 中 ,我们 为 计数 右 的 reducer 添加 代码 : 


redux/counter/complete/initial-reducer.js 





function reducer(state, action) { 
if (action.type === 'INCREMENT') { 
return state + 1; 
} else { 
return state; 
} 
} 





如 果 action.type 的 值 是 INCREMENT , 那么 我 们 返回 递增 后 的 状态 ; 否则 , reducer 返 


直上 大 
No 


@ 你 可 能 想 知 道 ， 如 果 reducer 接收 到 无 法 识别 的 action.type， 那么 引发 错误 是 否 是 


一 个 更 好 的 想法 呢 ? 


下 一 章 将 介绍 reducer 组 合 如 何 将 状态 管理 “分 解 ” 为 更 小 且 更 聚焦 的 函数 。 这 些 


更 小 的 reducer 可 能 只 处 理应 用 程序 中 的 状态 和 动作 的 一 个 子 集 


收 到 无 法 识别 的 动作 ， 应 该 忽略 该 动作 并 返回 未 修改 的 状态 。 
试 试 看 
在 app.js 的 底部 ， 让 我 们 添加 一 些 代码 来 测试 reducer。 





我 们 将 调用 reducer， 并 传人 一 些 整数 作为 状态 ， 然 后 查看 reducer 是 如 何 增加 数字 的 。 如 细 


们 传人 一 个 未 知 的 动作 类 型 ，reducer 则 返回 未 修改 的 状态 : 


redux/counter/complete/initial-reducer.js 


。 因 此， 如果 它们 接 


反 回 未 修改 的 























const incrementAction = { type: 'INCREMENT' }; 

console.1log(reducer(@, incrementAction)); // -> 1 
console.log(reducer(1, incrementAction)); // -> 2 
console.1log(reducer(5, incrementAction)); // -> 6 


const unknownAction = { type: 'UNKNOWN' }; 


console.1log(reducer(5, unknownAction)); // -> 5 
console.1log(reducer(8, unknownAction)); // -> 8 

















保存 app. js， 并 使 用 . /node_modules/ .bin/babel-node 命令 运行 该 程 


$ ./node_modules/.bin/babel-node app.js 


从 出 应 该 如 下 所 示 : 





oo OON 


序 : 
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10.4.5 ”递减 计数 器 


同样 ,递减 action 对 象 有 一 个 type 是 DECREMENT : 


一 一 


type: 'DECREMENT', 
} 


为 了 支持 递减 动作 ， 我 们 在 reducer 中 添加 了 男 一 个 子 句 : 


redux/counter/complete/initial-reducer-w-dec.js 





function reducer(state, action) { 
if (action.type === 'INCREMENT') { 
return state + 1; 
} else if (action.type === 'DECREMENT') { 
return state - 1; 
} else { 
return state; 
} 
} 





试 试看 
在 app.js 的 底部 ， 且 在 我 们 分 派 递 增 动作 的 代码 下 面 ， 添 加 一 些 代码 来 分 派 递减 动作 : 


redux/counter/complete/initial-reducer-w-dec.js 














const decrementAction = { type: 'DECREMENT' }; 


console.1log(reducer(10, decrementAction)); // -> 9 
console.log(reducer(9, decrementAction)); // -> 8 
console.log(reducer(5, decrementAction)); // -> 4 





使 用 . /node_modules/ .bin/babel-node 命令 运行 app. js: 


$ ./node_modules/.bin/babel-node app.js 


输出 应 该 如 下 所 示 : 


本 OO 


10.4.6 ”支持 动作 的 其 他 参数 


在 上 一 个 示例 中 ，action 对 象 只 包含 一 个 type， 该 type 告诉 reducer 是 递增 状态 还 是 递减 状 
态 。 但 应 用 程序 中 的 行为 通常 不 能 用 一 个 单独 的 值 来 描述 。 在 这 些 情况 下 ， 需 要 额外 的 参数 来 描述 
变化 。 
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举 个 例子 ， 如 果 和 希望 应 用 程序 允许 用 户 指 定 一 个 数量 来 递增 或 递减 ( 见 图 10-5 )， 该 怎么 办 ? 











图 10-5 带 有 amount 字段 的 示例 计数 器 界面 


我 们 将 让 action 对 象 携带 额外 的 amount 属性 。INCREMENT 类 型 的 action 对 象 则 如 下 所 示 : 


{ 
type: "INCREMENT ' ， 
amount: 7, 


} 


我 们 将 reducer 修改 为 能 按 action.amount 属性 递增 和 递减 ,并 期 望 现在 所 有 action 对 象 都 带 有 
此 属性 : 


redux/counter/complete/reducer-w-amount.js 

















function reducer(state, action) { 








if (action.type === 'INCREMENT') { 
return state + action.amount; 
} else if (action.type === 'DECREMENT') { 
return state - action.amount; 
} else { 
return state; 
} 
} 
试 试看 


清除 之 前 在 app. js 中 用 来 测试 reducer( ) 函数 的 代码 。 
这 一 次 ， 我 们 将 使 用 修改 后 的 动作 来 测试 reducer， 现 在 这 些 动作 都 带 有 amount 属性 : 


redux/counter/complete/reducer-w-amount.js 








const incrementAction = { 
type: "INCREMENT ' ， 
amount: 5, 


入 


console.1log(reducer(@, incrementAction)); // -> 5 
console.log(reducer(1, incrementAction)); // -> 6 


const decrementAction = { 
type: "DECREMENT ' ， 
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amount: 11， 


让 


console.1og(reducer(100，decrementAction)); // -> 89 





使 用 . /node_modules/.bin/babel-node 命令 运行 app. js: 
$ ./node_modules/.bin/babel-node app.js 
注意 输出 如 下 所 示 : 


5 
6 
89 


10.5 构建 store 


到 目前 为 止 ， 我 们 已 调用 了 reducer 并 手动 提供 了 状态 的 最 新 版 本 和 一 个 动作 。 
在 Redux 中 , store 负责 维护 状态 并 接收 来 自视 图 的 动作 。 只 有 store 才 可 以 访问 reducer, 见 图 10-6。 








图 10-6 store 内 部 








redux 库 提 供 了 一 个 用 于 创建 store 的 函数 : createStore( )。 该 函数 返回 一 个 store 对 象 ， 且 该 
对 象 持 有 一 个 内 部 变量 state。 此 外 ， 它 还 提供 了 一 些 与 store 交互 的 方法 。 


我 们 将 编写 自己 的 createStore() 版 本 , 以便 能 完全 理解 Redux store 的 工作 方式 。 到 本 章 结束 时 ， 
createStore( ) 的 代码 将 与 redux 库 提 供 的 代码 几乎 完全 一 样 。 


此 时 store 会 提供 两 个 方法 。 
e@ dispatch(): 该 方法 用 于 发 送 动作 到 store。 
@ getState() : 该 方法 用 于 读 取 state 的 当前 值 。 
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在 app.js 中 ， 清 除 之 前 用 来 测试 reducer( ) 的 代码 。 在 定义 reducer( ) 函数 的 下 方 ， 让 我 们 定 
义 createStore() 国 数 。createStore( ) 国 数 将 接收 一 个 参数 ， 即 store 所 需 的 reducer。 


让 我 们 来 看 完整 的 createStore( ) 函数 。 我 们 将 在 代码 块 下 方 逐一 介绍 : 


redux/counter/complete/reducer-w-store-v1.js 





function createStore(reducer) { 
let state = 0; 


const getState = () => (state); 


const dispatch = (action) => { 
state = reducer(state, action); 


} 


return { 
getstate, 
dispatch, 
}; 
} 





reducer 参数 

createStore( ) 国 数 只 接收 一 个 reducer 参数 。 这 也 是 我 们 指示 store 应 使 用 的 reducer 函数 的 
方式 。 

state 


我 们 在 createStore( ) 函数 的 顶部 将 state 初始 化 为 6。 注 意 ，state 变量 是 封闭 的 ， 这 使 得 
state 变 为 私有 ， 在 createStore( ) 函数 之 外 无 法 访问 。 











省 有 关闭 包 的 更 多 信息 ， 请 参见 下 面 的 “工厂 模式 ”。 


getState() 

要 从 createStore( ) 函数 外 部 对 state 进行 读 取 访问 ,我 们 可 以 使 用 getstate( ) 方 法 返回 state。 
dispatch() 

dispatch( ) 方 法 是 我 们 向 store 发 送 动作 的 方式 。 可 以 这 样 调用 : 

store .dispatch({ type: 'INCREMENT', amount: 7 }); 


dispatch( ) 函数 使 用 当前 的 state 和 action 来 调用 作为 参数 传人 的 reducer 吨 数 ， 并 将 state 
设置 为 reducer 的 返回 值 。 

请 注意 ，dispatch( ) 函数 并 不 返回 状态 。Redux 中 分 派 动作 是 “发 了 就 忘 ” 的 。 当 我 们 调用 
dispatch( ) 函数 时 ， 会 向 store 发 送 一 个 通知 ， 但 不 期 望 知道 store 何 时 或 者 如 何 处 理 该 动作 。 

向 store 分 派 动作 与 读 取 状 态 的 最 新 版 本 的 这 两 个 操作 是 解 耦 的 。 在 本 章 末尾 ， 当 我 们 将 store 连 
接 到 React 视图 时 ， 就 能 看 到 它们 在 实践 中 是 如 何 工作 的 。 
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返回 的 对 象 
在 createStore( ) 也 数 的 底部 ， 我 们 返回 了 一 个 新 对 象 。 这 个 对 象 将 getState() 和 dispatch() 
作为 方法 。 





工厂 模式 

在 上 面 的 createStore() 函数 中 ， 我 们 使 用 了 一 个 模式 ， 称 为 “工厂 模式 ”。 这 是 JavaScript 
中 普遍 存在 的 一 种 模式 ， 用 于 创建 像 store 这 样 的 复杂 对 象 。 

工厂 模式 为 工厂 函数 中 声明 的 变量 提供 了 一 个 闭 包 。 在 createStore( ) 函数 的 顶部 ， 我 们 声明 
了 state 交 量 . 


function createStore(reducer) { 
let state = 0; 
/Le 


state 是 一 个 私有 变量 ， 只 有 在 createStore() 中 声明 的 函数 才能 访问 它 。 此 外 ， 因 为 state 
位 于 闭 包 内 部 ， 所 以 该 变量 在 函数 调用 期 间 一 直 “ 存 在 ”。 
例如 ， 请 考虑 以 下 工厂 函数 : 


function createAdder() { 
let value = 0; 


const add = (amount) => (value = value + amount); 
const getValue = () => (value); 


return { 
add, 
getValue, 
} 
} 


我 们 首先 调用 工厂 函数 来 实例 化 adder 对 象 ， 且 它 的 私有 变量 value 被 初始 化 为 0: 


const adder = createAdder(); 


当 createAdder( ) 函 数 返 回 新 对 象 并 退出 时 , 该 变量 在 内 存 中 的 值 为 6。 当 调用 add( ) 方 法 时 ， 
我 们 修改 的 是 同一 个 值 : 


adder .add(1) ; 
adder .getValue( ) 
人 兰 这 -和 
adder .add(1); 
adder .getValue( ); 
// => 2 
adder .add(5); 
adder .getValue( ); 
XA/ SS 


重要 的 是 ， 只 有 工厂 内 部 的 函数 才能 访问 value 变量 ， 这 样 可 以 防止 意外 的 读 取 或 写 入 。 
在 store 中 ， 这 可 以 防止 在 dispatch() 函 数 之 外 对 state 进行 任何 的 修改 。 
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试 试看 
在 app.js 中 ,我 们 将 在 createStore 





) 函数 下 方 编写 代码 来 测试 store。 





我 们 将 使 用 createStore( ) 函数 来 创建 store 对 象 ， 然 后 分 派 一 个 action 到 store 中 ， 而 不 是 使 





























个 分 派 动作 之 间 一 直 存 在 。 

















用 state 和 action 来 调用 reducer( ) 清 数 。 因 为 store 保存 了 一 个 state 内 部 变量 , 所 以 state 在 各 


可 以 使 用 getState( ) 方 法 来 读 取 分 派 动作 之 间 的 state 值 : 


redux/counter/complete/reducer-w-store-v1.js 








const store = createStore(reducer); 


const incrementAction = { 
type: 'INCREMENT', 
amount: 3, 


把 


store.dispatch(incrementAction); 
console.1og(store.getState()); // -> 
store.dispatch(incrementAction); 
console.1og(store.getState()); // -> 


const decrementAction = { 
type: “DECREMENT ' ， 
amount: 4, 


}; 


store.dispatch(decrementAction); 
console.1og(store.getState()); // -> 


3 


6 


2 

















使 用 . /node_modules/.bin/babel-node 命令 运行 app. js: 


$ ./node_modules/.bin/babel-node app 


注意 输出 : 


3 
6 
2 


10.6 ”Redux 的 核心 


实际 上 , 我 们 的 createStore( ) 函数 非 


.js 


常 类 似 于 与 redux 库 附带 的 createStore( ) 函数 。 到 本 章 























结束 时 ， 我 们 将 对 createStore( ) 函数 进行 一 些 调整 和 补充 ， 使 其 更 接近 redux 库 。 





现在 我 们 已 看 到 了 Redux store 的 实践 ， 








下 面 回顾 一 下 Redux 的 主要 思想 : 








应 用 程序 的 所 有 数据 都 在 一 个 名 为 状态 的 数据 结构 中 ， 且 状态 保存 在 store 中 。 


可 以 看 到 store 有 一 个 状态 的 私有 变量 ， 


即 state。 
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应 用 程序 从 store 中 读 取 状 态 。 
可 以 使 用 getstate( ) 方 法 访问 store 的 状态 。 
状态 永远 不 会 在 store 外 直接 改变 。 
因为 state 是 一 个 私有 变量 ， 所 以 它 不 能 在 store 之 外 发 生变 化 。 

视图 会 发 出 描述 所 发 生 事 件 的 动作 。 

可 以 使 用 dispatch( ) 浮 数 将 这 些 动作 发 送 到 store。 

旧 的 状态 和 动作 通过 一 个 函数 〈reducer) 进行 组 合 来 创建 新 状态 。 

在 dispatch( ) 也 数 内 部 ，store 使 用 当前 的 state 和 action 来 调用 reducer( ) 函数 以 获取 新 
状态 。 

还 有 一 个 Redux 的 关键 思想 我 们 还 没有 提 到 |: 

reducer 函数 必须 是 纯 函 数 。 

我 们 将 在 下 一 个 应 用 程序 中 探讨 这 个 概念 。 
下 一 步 

在 下 一 个 应 用 程序 以 及 接 下 来 的 两 章 中 ,我 们 将 使 用 越 来 越 复 杂 的 例子 。 我 们 讨论 的 所 有 思想 都 
源 自 以 下 核心 模式 : 使 用 单个 store 控制 状态 , 并 用 reducer 对 状态 进行 更 新 。 该 reducer 将 接收 一 个 当 
前 状态 和 一 个 动作 作为 参数 ， 并 返回 一 个 新 状态 。 
如 果 理 解 了 上 面 提出 的 思想 ， 那 么 你 很 可 能 发 明 出 我 们 将 要 讨论 的 许多 模式 和 库 。 
要 了 解 Redux 如 何在 功能 丰富 的 Web 应 用 程序 中 和 运行， 我 们 将 介绍 : 
e@ 如 何在 状态 中 小 心 处 理 更 复杂 的 数据 结构 ; 
e@ 如 何在 状态 改变 时 得 到 通知 ， 而 不 必 使 用 getstate( ) 方 法 轮 询 store ( 使 用 订阅 ); 
e@ ”如何 将 大 的 reducer 分解 成 更 易于 管理 的 较 小 的 reducer ( 并 重新 组 合 ); 

e@ 如 何在 一 个 支持 Redux 的 应 用 程序 中 组 织 React 组 件 。 

让 我 们 首先 处 理 状态 中 更 复杂 的 数据 结构 。 在 本 章 的 其 余部 分 ， 我们 将 从 计数 器 应 用 程序 切换 
到 早期 的 聊天 应 用 程序 。 在 接 下 来 的 章节 中 ， 聊 天 应 用 程序 的 界面 将 开始 复制 Facebook 的 丰富 性 和 








































































































































































































10.7 早期 的 聊天 应 用 程序 


10.7.1 预览 


我 们 将 在 redux/chat_simple 文件 夹 中 构建 聊天 应 用 程序 。 从 redux/counter 目录 中 ， 你 可 以 


输入 命令 : 


$ cd ../chat_simple 
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首先 ， 运行 npm _ install 命令 : 
$ npm install 


运行 1s 来 查看 该 文件 夹 的 内 容 : 


$ 1s 

README .md 
nightwatch. json 
node_modules 
package. json 
public 
semantic 
semantic. json 
SITC 

tests 
yarn.1ock 


此 应 用 程序 的 结构 是 用 create-react-app 生成 的 。 


名 有 关 create-react-app 的 更 多 信息 ， 请 参见 第 7 章 。 





App.js 在 src/ 目 录 中 ， 这 是 本 章 中 我 们 要 一 起 工作 的 文件 : 


$ 1s src/ 
App.js 
complete 
index.css 
index. js 





与 create-react-app 生成 的 应 用 程序 一 样 ，index. js 是 我 们 将 cApp /> 挂 载 到 DOM 的 地 方 。 在 
complete/ 目 录 内 部 ， 是 本 章 中 逐步 构建 的 App 组 件 的 迭代 版 本 。 


此 时 ，index.js 挂 载 的 是 complete/App-5. js， 这 是 本 章 末尾 得 到 的 应 用 程序 的 完整 版 本 。 可 
以 启动 应 用 程序 进行 查看 : 


$ npm start 




















接着 导航 到 localhost:3066 ( 见 图 10-7 )。 
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©®O® ， 口 Redux chat Basics 


React 





€ CG [ localhost:3000 





Chat Basics 


Neil, I'm maneuvering in roll, 
Roger |see you. 
Columbia, Houston. On my Mark 9 30 to ignition. 


Roger Mike. 























10-7 本 章 中 构建 的 聊天 应 用 程序 的 迭代 版 本 


在 接 下 来 的 儿童 中 ,我 们 将 增强 这 个 应 用 程序 的 功能 设置 ， 并 会 增加 其 复杂 性 。 现 在 ， 可 以 使 用 
输入 框 添加 消息 ， 并 通过 点 击 消息 来 删除 它们 。 





























然而 我 们 应 该 还 记得 ， 还 需要 修改 index. js， 使 其 包含 ./App 而 不 是 ./complete/App-5: 


import React from "react"; 
import ReactDOM from "react-dom"; 
import APP from "./App"; 


打开 src/App.js， 可 以 看 到 我 们 为 计数 器 应 用 程序 构建 的 createStore( ) 函数 已 存在 。 


与 计数 器 应 用 程序 一 样 ， 我 们 将 首先 构建 聊天 应 用 程序 的 reducer。 构 建 了 reducer 之 后 ， 我 们 会 
看 到 如 何 将 Redux store 连接 到 React 视图 。 











不 过 ， 在 构建 reducer 之 前 ， 


应 该 检查 一 下 聊天 应 用 程序 将 如 何 表示 其 状态 和 动作 。 
10.7.2 ”状态 


计数 器 应 用 程序 中 的 状态 是 一 个 数字 。 在 聊天 应 用 程序 中 ， 该 状态 将 是 一 个 对 象 。 





此 状态 对 象 只 有 一 个 messages 属性 。messages 是 一 个 字符 串 数组 ， 每 个 字符 串 代 表 应 用 程序 中 
的 一 条 消息 。 例 如 : 
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// 一 个 状态 的 示例 值 
{ 


messages: [ 


'here is message one', 
'here is message two', 


], 
} 


10.7.3 动作 


我 们 的 应 用 程序 将 处 理 两 个 动作 : ADD_MESSAGE 和 DELETE_ 


ADD_MESSAGE 动作 对 象 始终 会 有 一 个 message 属性 ， 该 属性 是 即将 要 添加 到 状态 
ADD_MESSAGE 动作 对 象 的 形状 如 下 所 示 : 
{ 


type: "ADD_MESSAGCE ' ， 
message: 'Whatever message is being added here ' ， 
} 


MESSAGE 。 


























的 消息 。 


DELETE_MESSAGE 动作 对 象 会 从 状态 中 删除 指定 的 消息 














d/o 


如 果 每 条 消息 都 是 一 个 对 象 ， 那 么 我 们 可 以 在 创建 消息 时 为 其 分 配 一 个 id 
DELETE_MESSAGE 动作 可 

















以 使 用 id 属性 删除 指定 的 消息 。 
但 是 为 了 简单 起 见 ， 目 前 我 们 的 消息 是 字符 串 。 要 从 状态 中 删除 指定 的 消息 ， 我 们 可 以 使 用 数组 
中 的 消息 索引 。 
































考虑 到 这 一 点 ，DELETE_MESSAGE 动作 对 象 的 
{ 














攻 状 如 下 所 示 : 
type: 'DELETE_MESSAGE', 
index: 2，// <- 这 是 要 删除 的 消息 的 索引 

} 


10.8 构建 reducer() 函数 


10.8.1 初始 化 state 


下 面 在 createStore( ) 函数 的 顶部 将 state 初始 化 为 9: 
function createStore(reducer) { 

let state = 0; 

es 
} 


虽然 这 在 计数 器 应 用 程序 中 工作 得 很 好 ， 但 我 们 希望 消息 传递 应 用 程序 的 初始 状态 是 一 个 空 数 
组 ， 如 下 所 示 : 
{ // 一 个 对 象 
messages: [], // 没有 消息 
} 
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需要 修改 createStore( ) 函数 ,使 其 适用 于 此 状态 以 及 其 他 任何 状态 的 表示 。 
我 们 将 让 createStore( ) 函数 接收 第 二 个 参数 initialState。 该 函数 会 将 state 初始 化 为 这 个 值 。 


在 App.js 内 ， 现 在 开始 编辑 createStore( ) 困 数 ， 


redux/chat_simple/src/complete/App-1.js 


























function createStore(reducer, initialState) { 
let state = initialState; 


A Es 





稍 后 在 初始 化 store 时 ， 我 们 将 传人 initialState。 


10.8.2 ”处 理 ADD_MESSAGE 动 作 
在 App.js 内 ， 且 在 createStore( ) 函数 下 方 ， 我 们 开始 编写 reducer( ) 函数 : 


redux/chat simple/src/complete/App-1.js 























function reducer(state, action) { 
if (action.type === 'ADD_MESSAGE') { 
return { 
messages: state.messages.concat(action.message), 
}; 
} else { 
return state; 
} 
} 











肖 息 附加 到 状态 中 的 messages 数组 的 末尾 。 





sy 


当 reducer 接收 到 ADD_MESSAGE 动作 时 ， 我 们 希望 将 新 
否则 ， 返 回 未 修改 的 状态 。 
我 们 可 能 会 尝试 使 用 Array 对 象 的 push( ) 方 法 将 新 消息 附加 到 messages 数组 中 : 


// 这 样 做 很 吸引 人 ， 不 过 有 缺陷 

if (action.type === 'ADD_MESSAGE') { 
state.messages.push(action.messages ) ; 
return state; 


} 

这 可 以 产生 期 望 的 结果 : state.messages 将 包含 新 消息 。 

然而 ， 这 违反 了 Redux reducer 的 原则 ， 即 前 面 提 到 的 原则 列表 中 关于 Redux 的 最 后 一 个 关键 思 
想 : reducer 必须 是 纯 函 数 。 

纯 函 数 的 定义 如 下 所 示 。 


e 对 于 相同 的 参数 集 ， 4 始终 返回 相同 的 值 。 
e 不 要 以 任何 方式 改变 其 周围 的 “世界 ”， 这 包括 使 函数 外 部 的 变量 发 生变 化 或 者 更 改 数据 库 中 
的 条 目 。 










































































由 于 state 是 reducer( ) 函数 外 部 的 变量 ， 且 是 作为 参数 传人 的 ， 因此 reducer( ) 函数 并 不 “ 拥 
该 变量 。 就 像 上 面 使 用 push 对 state 所 做 的 修改 那样 ， 这 会 导致 reducer( ) 函数 不 纯 。 



































人 


10.8 构建 reducer0O 函 数 367 





在 编写 Redux reducer 时 ， 如 果 需 要 修改 state， 那 么 reducer 纯 函 数 将 始终 返回 一 个 新 的 数组 或 
对 象 。 这 源 于 前 几 章 中 介绍 的 将 组 件 状态 视 为 不 可 变 的 实践 。reducer 应 该 将 状态 对 象 视 为 不 可 变 或 





只 读 。 





用 reducer 应 该 将 状态 对 象 视 为 不 可 变 。 











因为 我 们 不 想 修 改 state 参数 ， 所 以 ADD_MESSAGE 动作 应 该 改 为 用 一 个 新 的 messages 数组 来 创 





建 一 个 新 的 状态 对 象 ， 且 新 数组 应 该 附加 了 所 需 的 消息 。 























再 看 一 下 我 们 如 何在 ADD_MESSAGE 动作 中 生成 下 一 个 状态 : 


redux/chat_ simple/src/complete/App-1.js 





return { 


messages: state.messages.concat(action.message), 


}; 





至 关 重 要 的 是 , Array 对 象 的 concat() 方 法 不 会 修改 原始 数组 。 相反 , 它 将 创建 一 个 原始 数组 的 





新 副本 ， 该 副本 包含 附加 的 action .message。 


Redux 坚持 reducer 为 纯 函 数 的 具体 动机 以 及 它 带 来 的 好 处 。 


@ 一 般 来 说 ， 编 写 纯 函 数 有 助 于 减少 代码 中 的 意外 的 或 神秘 的 bug。 下 一 章 将 探讨 


试 试看 
我 们 将 在 App. js 的 底部 ， 且 在 定义 redu 


cer( ) 函数 的 下 方 编写 测试 代码 。 





createStore( ) 函数 现在 接收 一 个 initialState 作为 参数 。 让 我 们 先 定义 这 个 变量 : 





redux/chat_ simple/src/complete/App-1.js 





const initialState = { messages: [] }; 





接着 初始 化 store: 
redux/chat _ simple/src/complete/App-1.js 








const store = createStore(Treducer ，initialState ) 








让 我 们 添加 代码 来 分 派 添 加 消息 的 动作 到 到 store 中 。 这 一 次 ， 我 们 会 将 每 个 状态 的 “版 本 ” 保 





存在 stateV1 和 stateV2 两 个 变量 中 ， 并 会 如 


redux/chat _ simple/src/complete/App-1.js 





E 最 后 打印 出 该 状态 的 两 个 版 本 : 





const addMessageAction1 = { 
type: "ADD_MESSAGCE ' ， 
message: 'How does it look, Neil?', 


je 


store.dispatch(addMessageActiont1 ); 
const stateV1 = store.getState( ) ; 
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const addMessageAction2 = { 
type: "ADD_MESSACE ' ， 
message: 'Looking good.', 


le 


store.dispatch(addMessageAction2); 
const stateV2 = store.getState(); 


console.1log('State v1:'); 
console.1log(stateV1); 
console.1og('State v2:'); 
console.1og(stateV2); 








虽然 我 们 在 一 个 create-react-app 的 项 目 中 ,但 还 没有 任何 React 组 件 。 因 此 我 们 只 需要 用 
babel-node 运行 App. js: 





./Node_modules/.bin/babel-node src/App.js 


我 们 将 得 到 以 下 结果 : 





State vi: 

{ messages: [ 'How does 让 look, Neil?' ] } 

State v2: 

{ messages: [ 'How does 让 look, Neil?', 'Looking good.' | 


重要 的 是 ， 在 分 派 动作 期 间 state 对 象 没有 被 修改 。 我 们 将 该 状态 的 第 一 个 版 本 保存 为 变量 
statev1t 。 虽 然 这 个 对 象 被 传递 给 了 reducer() 函数 , 但 reducer( ) 也 数 并 没有 对 其 进行 修改 。 相 反 ， 
它 创 建 了 一 个 新 对 象 ， 并 附加 了 第 二 条 消息 ， 然 后 返回 这 个 新 对 象 并 将 其 设置 为 变量 stateV2。 


10.8.3 ”处 理 DELETE_MESSAGE 动 作 


如 上 所 述 ，DELETE_MESSAGE 动作 对 象 的 形状 如 下 所 示 : 


{ 
type: 'DELETE_MESSAGE', 


index: 2，// 《<- 这 是 要 删除 的 消息 索引 

} 
为 了 支持 这 个 动作 ， 我 们 需要 添加 一 个 新 的 else if 语句 来 处 理 'DELETE_MESSAGE' 类 型 的 动作 
对 象 。 当 reducer 接收 到 此 动作 时 ， 它 应 该 返回 一 个 带 有 messages 数组 的 对 象 ， 该 对 象 应 包含 除 动作 
对 象 的 index 属性 指定 的 消息 之 外 的 所 有 消息 。 


最 简洁 的 解决 方案 似乎 是 使 用 Array 的 splice() 方 法 。splice() 的 第 一 个 参数 是 要 删除 的 元 素 
的 起 始 索引 ; 第 二 个 参数 是 要 删除 的 元 素数 量 : 

// 这 样 做 很 吸引 人 ， 但 是 有 缺陷 

case 'DELETE_MESSAGE ' : 


state.messages.splice(action.index, 1); 
return state; 


但 是 ，splice 与 push 一 样 ， 它 会 修改 原始 数组 ， 这 会 使 得 reducer( ) 函数 不 纯 。 同 样 ， 我 们 不 
能 修改 state ， 而 是 必须 将 其 视 为 只 读 。 
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可 以 像 在 ADD_MESSAGE 中 那样 创建 一 个 新 对 象 。 这 个 新 对 象 将 包含 一 个 新 的 messages 数组 ， 除 
了 那个 被 删除 的 元 素 ， 它 应 该 包含 state.messages 中 的 所 有 元 素 。 


要 在 JavaScript 中 做 到 这 一 点 ， 我 们 可 以 创建 一 个 新 的 数组 ， 该 数组 包含 : 
@ 从 0 到 action.index 的 所 有 元 素 ; 
@ 从 action.index + 1 到 数组 末尾 的 所 有 元 素 。 


我 们 将 使 用 Array 的 slice( ) 方 法 来 获取 所 需 的 数组 “区 块 ”: 
redux/chat simple/src/complete/App-2.js 














function reducer(state，action) { 


if (action.type === 'ADD_MESSAGE' ) { 
return { 
messages: state.messages.concat(action.message), 
二 
} else if (action.type === 'DELETE_MESSAGE') { 
return { 
messages: [ 
...State.messages.slice(@, action.index), 
...State.messages.slicel( 
action.index + 1, state.messages.1length 
), 
js 
}; 
} else { 
return state; 
} 


} 

















重要 的 是 ，slice 不 会 修改 原始 数组 。 相 反 ， 它 会 返回 一 个 新 数组 ， 其 中 包含 我 们 指定 范围 的 元 
素 。 现 在 我 们 创建 了 一 个 新 数组 , 它 组 合 了 两 个 范围 :从 @ 到 action.index( 但 不 包含 action.index ) 
以 及 action.index 之 后 的 每 个 元 素 。 


各 有 关 ES6 扩展 运算 符 (... ) 的 更 多 信息 ， 请 参阅 附录 B。 














试 试看 

在 App.js 的 最 下 面 ,我 们 将 添加 测试 ADD_MESSAGE 动作 的 代码 ,在 文件 中 最 后 一 个 console.1og() 
语句 下 方 编写 如 下 代码 : 

redux/chat_simple/src/complete/App-2.js 

















const deleteMessageAction = { 
type: "DELETE_MESSACE ' ， 
index: 0, 


}; 


store.dispatch(deleteMessageAction); 
const stateV3 = store.getState( ) ; 


console.1og('State v3:'); 
console.1og(stateV3 ) ; 
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在 该 状态 的 第 二 个 版 本 时 , 我 们 已 往 状 态 中 添加 了 两 条 消息 ,然后 我 们 分 派 了 一 个 DELETE_MESSAGE 





动作 ， 并 将 消息 的 索引 指定 为 6。 
接着 使 用 babel-node 命令 运行 文件 : 
./node_modules/.bin/babe1l-node src/App .js 


正如 预期 ， 在 state 的 第 三 个 版 本 中 ， 第 一 条 消息 已 被 删除 : 


State v1: 




















{ messages: [ 'How does it look, Neil?' ] } 

State v2: 

{ messages: [ 'How does 让 look, Neil?', 'Looking good.' ] } 
State v3: 

{ messages: [ 'Looking good.' ] } 


10.9 订阅 store 














到 目前 为 止 ， 我 们 的 store 为 视图 提供 了 分 派 动 作 和 读 取 状态 的 当前 版 本 的 方法 。 
然而 ， 在 将 store 连接 到 React 之 前 ， 还 缺少 一 个 重要 的 功能 。 虽 然 视图 可 以 在 任何 时 候 使 用 




















getState( ) 方 法 读 取 状态 ,但 视图 还 需要 知道 状态 何 时 发 生 了 变化 。 使 用 getState( ) 方 法 不 断 轮 询 





store 是 很 低 效 的 。 








在 之 前 的 应 用 程序 中 , 当 我 们 想 要 修改 状态 时 , 就 会 调用 setState( ) 方 法 。 重 要 的 是 ,setState() 








方法 会 触发 对 组 件 的 render( ) 函数 的 调用 。 


























现在 状态 是 在 React 外 部 ， 且 在 store 内 部 被 修改 。 视 图 不 知道 它 何 时 发 生变 化 。 如 果 我 们 要 使 视 
图 与 store 中 的 最 新 状态 保持 一 致 ， 那 么 状态 无 论 什么 时 候 发 生变 化 ， 视 图 都 应 该 收 到 通知 。 












































store 会 使 用 观察 者 模式 ， 以 允许 视图 在 状态 变化 时 能 立即 更 新 。 视 图 将 注册 一 个 回 





调 函 数 ， 当 状 








态 发 生变 化 时 ,它们 会 被 调用 。store 会 保存 所 有 这 些 回调 函数 的 列表 。 当 状态 发 生变 化 时 ，store 会 调 











用 每 个 函数 ,“ 通 知 ” 监 听 器 所 发 生 的 更 改 。 

阐明 此 模式 的 最 佳 方法 就 是 去 实现 它 。 

在 createStore( ) 函数 内 ， 我 们 将 实现 以 下 操作 : 

(1) 定义 一 个 名 为 listeners 的 数组 ; 

(2) 添加 subscribe( ) 方 法 ， 该 方法 用 于 向 1isteners 数组 添加 新 的 监听 需 ; 
(3) 当 状态 发 生变 化 时 调用 每 个 监听 器 函数 。 

(1) 定义 一 个 名 为 listeners 的 数组 

我 们 在 createStore( ) 函数 的 顶部 声明 1isteners 变量 : 


redux/chat_simple/src/complete/App-3.js 



































function createStore(reducer, initialState) { 
let state = initialState; 
const listeners = []; 


XY a 
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(2) 添加 subscribe() 方 法 ， 该 方法 用 于 向 1isteners 数组 添加 新 的 监听 器 
接 下 来 ， 在 声明 1isteners 变量 的 下 方 ， 添 加 subscribe( ) 负数: 
redux/chat_simple/src/complete/App-3.js 








const subscribe = (listener) => ( 
listeners.push(listener) 


3 





subscribe( ) 函数 的 参数 1istener 是 一 个 函数 ,每 当 状 态 发 生变 化 时 , 视图 都 会 调用 该 函数 。 我 
们 需要 将 这 个 函数 添加 到 1isteners 数组 中 。 
要 使 subscribe( ) 函数 能 被 访问 ， 我 们 需要 对 它 进 行 公开 。 可 以 通过 将 它 添 加 到 createstore() 
函数 返回 的 store 对 象 中 来 实现 : 
redux/chat_simple/src/complete/App-3.js 
yy se 


return { 

subscribe, 
getstate, 
dispatch, 
把 

















(3) 当 状 态 发 生变 化 时 调用 每 个 监听 器 函数 
任何 时 候 状态 发 生变 化 ， 我 们 都 需要 调用 1isteners 中 保存 的 所 有 函数 。 每 当 我 们 分 派 动作 时 ， 
状态 可 能 会 改变 。 因 此 ， 我 们 需要 将 调用 迎 辑 添加 到 dispatch( ) 函数 中 ， 
redux/chat_ simple/src/complete/App-3.js 
pe 
const dispatch = (action) => { 
state = reducer(state, action); 
listeners .forEach(1 => 1()); 
}; 
A es 









































注意 ， 我 们 并 没有 向 1isteners 传递 参数 。 此 回调 仅仅 是 为 了 通知 状态 的 变化 。 
完整 的 createStore( ) 函数 


完整 的 createStore( ) 困 数 如 下 所 示 : 
redux/chat_simple/src/complete/App-4.js 





function createStore(reducer, initialState) { 
let state = initialState; 
const listeners = []; 


const subscribe = (listener) => ( 
listeners.push(listener) 


好 
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const getState = () => (state); 


const dispatch = (action) => { 
state = reducer(state, action); 
listeners.forEach(1 => 1()); 


下 


return { 
subscribe, 
getstate, 
dispatch, 
后 
} 





相似 


除去 注释 、 和 警告 整 性 检查 ，redux 库 的 createStore( ) 水 数 的 外 观 和 行为 与 我 们 的 函数 非常 





试 试看 

有 了 subscribe() 国 数 之 后 ，store 就 完成 了 。 让 我 们 开始 进 

在 App.js 中 ， 清 除 在 初始 化 store i 
redux/chat_simple/src/complete/App-4.js 








const store = createStore(reducer, initialState); 





注册 








我 们 会 像 以 前 一 样 分 派 添 加 和 删除 消息 的 动作 。 但 有 一 个 除外 ， 现 在 会 使 用 subscribe( ) 方 法 来 





一 个 函数 ， 在 每 次 状态 发 生变 化 时 该 函数 将 执行 console. 10g( )。 











监听 器 将 打印 当前 状态 到 控制 台 ， 如 下 所 示 : 


redux/chat_simple/src/complete/App-4.js 





const listener = () => { 
console.1log('Current state: '); 
console.1og(store.getState() ) ; 
}; 





接 下 来 订阅 这 个 监听 融 : 


redux/chat_simple/src/complete/App-4.js 





store.subscribe(listener); 





都 











现在 可 以 分 派 动 作 了 。 在 每 次 调用 dispatch( ) 函数 后 , 我 们 传递 





























会 被 调用 ， 且 会 把 当前 状态 写 人 控制 台 : 











redux/chat_simple/src/complete/App-4.js 


给 subscribe( ) 方 法 的 监听 函数 





const addMessageAction1 = { 

type: 'ADD_MESSAGE', 

message: 'How do you read?', 
过 
store.dispatch(addMessageAction1 ) ; 
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// -》 1listener( ) 函 数 被 调用 


const addMessageAction2 = { 
type: "ADD_MESSAGCE ' ， 
message: 'I read you loud and clear, Houston.', 
上 
store.dispatch(addMessageAction2); 
// -》” 1listener() 函 数 被 调用 


const deleteMessageAction = { 
type: "DELETE_MESSACE ' ， 
index: 0, 
上 
store.dispatch(deleteMessageAction); 
// -》 1listener() 有 函数 被 调用 











保存 App. js， 并 使 用 babel-node 命令 运行 : 


$ ./node_modules/.bin/babel-node src/App.js 


注意 查看 输出 : 


Current state: 

{ messages: [ 'How do you read?' ] } 

Current state: 

{ messages: [ 'How do you read?', 'I read you loud and clear, Houston.' ] } 
Current state: 

{ messages: [ 'I read you loud and clear, Houston.' ] } 


完成 了 store 的 功能 后 ， 我 们 准备 将 Redux store 连接 到 一 些 React 视图 中 ， 这 样 就 能 看 到 一 个 能 
正常 工作 的 完整 Redux 流程 。 


10.10 将 Redux 连接 到 React 


回顾 之 前 的 Flux 示意 图 , 现在 我 们 可 以 探索 Redux 和 React 如 何 协同 工作 以 实现 这 种 设计 模式 的 
背后 细节 ( 见 图 10-8 )。 











10-8 Flux 示意 图 


10.10.1 使 用 store.getState() 


React 不 再 是 状态 的 管理 者 ， 状 态 的 管理 者 现在 是 Redux。 因 此 ， 顶 级 的 React 组 件 将 使 用 
store.getState( ) 方 法 , 而 不 是 this.state 来 驱动 它们 的 render( ) 函数 。Redux 提供 的 状态 将 从 项 
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级 组 件 向 下 渗透 。 
如 果 我 们 想 要 演 染 状态 中 的 messages ， 可 以 从 Redux store 中 获取 : 
// 顶级 组 件 的 例子 


class App extends React.Component { 





yy 

render() { 
const messages = store.getState( ) .messages ; 
7 


} 
}; 


10.10.2 ”使 用 store. subscribe() 
当 React 管理 状态 时 ， 我 们 会 调用 setstate( ) 方 法 来 修改 this.state。setState() 方 法 将 在 状 
态 修 改 后 触发 组 件 的 重新 演 染 。 
当 Redux 管理 状态 时 ， 我 们 使 用 顶级 React 组 件 中 的 subscribe( ) 方 法 来 设置 一 个 监听 函数 ， 用 
于 启动 组 件 的 重新 泻 染 。 
可 以 在 componentDidMount 函数 中 订阅 组 件 。 我 们 传递 给 subscribe( ) 方 法 的 监听 函数 会 调用 
this. forceUpdate( ) 函 数 ， 并 会 触发 该 组 件 (this ) 的 重新 演 染 。 
举 个 例子 ， 订 阅 一 个 React 组 件 如 下 所 示 : 


// 顶级 组 件 的 例子 
class App extends React.Component { 
AY 
componentDidMount() { 
store.subscribe(() => this.forceUpdate()); 


















































yy 
已 


10.10.3 ”使 用 store.dispatch() 
下 级 组 件 将 分 派 动作 以 响应 需要 修改 状态 的 事件 。 例 如 ， 每 当 删 除 按钮 被 点 击 时 ，React 组 件 可 
能 会 向 store 分 派 一 个 动作 : 
// 叶子 组 件 的 例子 
class Message extends React .Component { 
handleDeleteClick = () => { 
store.dispatch({ 


type: "DELETE_MESSAGCE ' ， 
index: this.props.index, 























这 个 dispatch( ) 方 法 调用 会 修改 该 状态 。 接 着 它 会 调用 我 们 在 subscribe( ) 方 法 中 注册 的 监听 函 
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数 ， 这 就 会 强制 App 组 件 重新 泻 染 。 当 调用 render( ) 函数 时 ，App 组 件 会 再 次 使 用 getState( ) 方 法 
从 store 中 读 取 数据 。 然 后 ，App 组 件 会 将 最 新 版 本 的 状态 向 下 传递 给 它 的 子 组 件 。 


每 次 React 分 派 一 个 动作 时 都 会 重复 这 个 循环 。 


10.10.4 ”聊天 应 用 程序 的 组 件 
聊天 应 用 程序 拥有 三 个 组 件 ( 见 图 10-9 )。 






































MessageView 


Neil, I'm maneuvering in roll. 
Roger. | see you. 
Columbia, Houston. On my Mark 9 30 to ignition. 


Roger, Mike. 


Messagelnput 





图 10-9 ”聊天 应 用 程序 的 三 个 组 件 





e@ App: 顶层 容器 组 件 。 

@ MessageView: 消息 列表 组 件 。 

e@ MessageInput: 用 于 添加 新 消息 的 输入 组 件 。 

如 我 们 所 见 ， 输 入 框 允许 添加 消息 ， 且 点 击 消息 可 以 将 其 删除 。 

MessageView 组 件 将 用 于 演 染 状态 的 messages 属性 ， 且 还 会 在 用 户 每 次 点 击 一 条 消息 时 分 派 一 
个 DELETE_MESSAGE 类 型 的 动作 。 

MessageInput 组 件 不 需要 使 用 状态 来 泻 染 。 但 是 ， 每 当 用 户 提 交 新 消息 时 ， 它 都 会 分 派 一 
ADD_MESSAGE 类 型 的 动作 。 


我 们 可 以 把 MessageView 组 件 拆 分 成 MessageList 和 Message 组 件 ,这 将 遵循 之 前 
的 应 用 程序 的 模式 。 但 目前 每 条 消息 都 非常 简单 ， 因 此 没 必要 这 样 做 。 
































10.10.5 ”准备 App. js 

对 于 这 个 项 目 ,store 的 逻辑 和 React 组 件 都 会 在 src/App.js 中 ,我 们 将 能 够 在 每 个 组 件 中 对 store 
进行 直接 引用 。 

不 过 在 更 复杂 的 应 用 程序 中 ，store 可 能 位 于 不 同 于 React 组 件 的 文件 中 。 下 一 章 将 探讨 React 组 
件 与 Redux store 对 象 通信 的 其 他 方式 。 

清除 src/App. js 末尾 的 store 声明 下 方 的 所 有 测试 代码 : 
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redux/chat_simple/src/complete/App-4.js 





const store = createStore(reducer, initialState); 





10.10.6 ” App 组 件 


App 组 件 是 应 用 程序 中 顶级 的 React 组 件 ， 且 它 将 是 从 store 中 读 取 状态 的 组 件 。 我 们 需要 它 来 订 
阅 Redux store。 

1. 订阅 状态 变化 

如 前 所 述 ， 我 们 将 在 componentDidMount 子 数 内 部 调用 subscribe() 方 法 。 我 们 提供 给 
subscribe() 方 法 的 回调 函数 会 调用 this. forceUpdate( ) ,这 会 导致 App 组 件 在 每 次 状态 发 生变 化 时 
都 会 重新 泻 染 : 


redux/chat _ simple/src/complete/App-S.js 


















































class App extends React .Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate( )); 


} 





2， 泻 关 染 视图 


在 render() 函数 中 ,我 们 首先 会 使 用 getState( ) 方 法 从 store 中 读 取 messages ; 然后 演 染 
MessageView 和 MessageInput 两 个 子 组 件 , 但 只 有 MessageView 组 件 需 要 消息 列表 ， 如 下 所 示 : 


redux/chat_ simple/src/complete/App-S.js 








render() { 
const messages = store.getState( ) .messages ; 


return ( 
<div className='ui segment'> 
<MessageView messages={messages} /> 
<MessageInput /> 
《</div> 
); 
} 





我 们 拥有 向 下 的 数据 管道 ， 从 store 到 App 组 件 再 到 MessageView 组 件 。 但 反 向 的 呢 ? 我 们 希望 
Pe MessageInput 组 件 角 bE 够 添加 消息 。 


当 React 管理 状态 时 ， 我 们 将 函数 作为 props 从 状态 管理 组 件 传 递 到 子 组 件 。 这 使 得 子 组 件 可 以 
将 事件 传递 到 修改 状态 的 父 组 件 。 


现在 有 了 一 个 可 以 分 派 动作 的 store 对 象 。 虽然 仍 可 以 集中 精力 在 App 组 件 中 处 理 所 有 与 store 
的 通信 ， 但 这 不 是 最 好 的 方案 ， 因 此 让 我 们 研究 一 下 如 何 允 许 子 组 件 直接 将 动作 分 派 到 store。 


@ 与 之 前 的 项 目 一 样 , 提供 的 两 个 div 标签 (及 其 className 属性 ) 仅 用 于 样式 设置 。 
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完整 的 App 组 件 如 下 所 示 : 
redux/chat_ simple/src/complete/App-$.js 





class App extends React.Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate()); 


} 


render() { 
const messages = store.getState().messages; 


return ( 
<div className='ui segment'> 
<MessageView messages={messages} /> 
<MessageInput /> 
</div> 
六 
} 
} 





10.10.7 MessageInput 组 件 

MessageInput 组 件 拥有 一 个 输入 字段 和 一 个 提交 按钮 。 当 用 户 点 击 提交 按钮 时 , 组 件 应 该 要 分 派 
一 个 ADD_MESSAGE 类 型 的 动作 。 

作为 一 个 受 控 组 件 ,我 们 需要 跟踪 在 状态 中 的 某 个 位 置 用 于 表示 该 输入 的 值 。 可 以 在 Redux store 
中 保持 此 状态 ,但 通常 来 说 ,将 表单 数据 保存 在 表单 组 件 的 状态 中 会 更 容易 一 些 。 

让 我 们 从 定义 初始 状态 以 及 onchange 处 理 函 数 开 始 : 

redux/chat _ simple/src/complete/App-S.js 
































class MessageInput extends React .Component { 
state = { 
Value : 


}; 


’ 


onChange = (e) => { 
this.setState({ 
value: e.target.value, 
上 
bb 





@ 有 关 受 控 组 件 的 更 多 信息 ， 请 参阅 第 6 章 。 





接 下 来 将 定义 handleSubmit( ) 函数 ， 该 函数 会 调用 dispatch( ) 方 法 : 
redux/chat_simple/src/complete/App-5$.js 





handleSubmit = () => { 
store.dispatch({ 
type: 'ADD_MESSAGE', 
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message: this.state.value, 
于 
this .setState({ 
Value: '" 
] ) 
}; 


/ 





render( ) 函数 将 包含 一 个 input 元 素 和 一 个 button 元 素 ， 




















button 元 素 的 onClick 属性 将 被 设置 为 this.handleSubmit 也 数 . 





redux/chat simple/src/complete/App-S.js 


它们 被 包装 在 一 个 div 标签 中 。 





render() { 
return ( 
<div className='ui input'> 
<input 
onChange={this .onChange} 
value={this .state.value} 
type='text' 
/> 
<button 
onClick={this.handleSubmit} 
className='ui primary button' 
type='submit" 
> 
Submit 
</button> 
</div> 
); 
} 





是 否 必 须 在 Redux store 中 保存 应 用 程序 的 所 有 状态 ? 


之 前 提 到 过 ， 可 以 将 输入 的 值 保存 在 Redux store 中 的 MessageInput 组 件 内 部 。 这 


是 一 种 完全 有 效 且 通 用 的 方法 。 


然而 ,我 们 经 常会 发 现在 某 些 区 域 使 用 组 件 状态 就 可 以 了 。 我们 喜欢 将 组 件 状态 用 
于 始终 与 组 件 隔 离 的 数据 ， 比 如 表单 输入 数据 或 下 拉 菜 单 是 否 打 开 的 状态 。 如 果 我 
们 将 来 感觉 “不 对 ”， 可 以 很 容易 地 将 该 状态 迁移 到 Redux 中 。 


10.10.8 ”MessageView 组 件 























MessageView 组 件 的 messages 属性 是 一 个 字符 串 数 组 。MessageVview 组 件 会 将 这 些 消息 演 





一 个 列表 。 此 外 ， 每 当 用 户 点 击 消息 时 ， 我 们 希望 都 分 派 一 个 DELETE_MESSAGE 类 型 的 动作 。 

















首先 定义 组 件 及 其 handleClick() 函数 。handleClick() 将 是 调 











handleCclick() 函 数 接收 一 个 index 参数 ， 并 在 分 派 的 动作 对 象 中 使 用 这 


redux/chat_simple/src/complete/App-$.js 

















个 参数 : 


] qispatch( ) 方 法 的 函 


数 。 





class MessageView extends React .Component { 
handleClick = (index) => { 
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store.dispatch({ 
type: 'DELETE_MESSAGE', 
index: index, 
}); 
; 





























render( ) 函数 将 使 用 map( ) 方 法 来 创建 要 演 染 的 消息 列表 。 我 们 希望 每 个 单独 的 消息 都 被 包 半 在 
一 个 div 标签 中 : 
redux/chat_ simple/src/complete/App-5$.js 








render() { 
const messages = this.props.messages.map((message, index) => (人 

《<div 
className='comment" 
key={index} 
onClick={() => this.handleClick(index)} 

> 
{message} 

</div> 


2 




















在 这 个 div 标签 中 ,我 们 设置 了 onclick 属性。 我们 希望 它 调用 一 个 调用 nandleCclick() 的 函数 ， 
并 传人 目标 消息 的 索引 作为 参数 。 

返回 一 个 包装 在 div 中 的 messages 数组 : 

redux/chat_simple/src/complete/App-5$.js 












































return ( 
《<div className='ui comments'> 
{messages} 
</div> 


状 








最 后 在 文件 底部 导出 App 组 件 : 
redux/chat _ simple/src/complete/App-S.js 





export default App 














我 们 已 在 index. js 中 包含 了 App 组 件 , 并 使 用 了 ReactDOM.render( ) 函数 将 它 挂 载 到 DOM 中 。 
因此 ， 我 们 准备 好 进行 测试 了 。 





























试 试看 
保存 App.js， 并 在 终端 中 从 项 目 文件 夹 的 根 目录 启动 服务 器 : 
$ npm start 











接着 添加 一 些 消 息 ， 然 后 点 击 它 们 ， 可 以 看 到 它们 会 立即 消失 。 
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10.11 下 一 步 








Redux 是 一 种 强大 的 方法 ， 用 于 管理 应 用 程序 的 状态 。 通 过 使 用 一 些 简单 的 思想 ， 我 们 可 以 获得 
一 个 可 理解 的 数据 架构 ， 且 该 架构 可 以 很 好 地 扩展 到 大 型 应 用 程序 中 。 
诚然 ， 在 应 用 程序 的 当前 状态 下 ， 很 难看 到 Redux 相对 于 在 React 中 管理 状态 的 优势 。 确 实 如 本 
章 介绍 中 所 述 ， 在 状态 管理 中 使 用 React 对 于 各 种 应 用 程序 来 说 是 更 好 的 选择 。 
然而 ， 随 着 我 们 不 断 扩大 消息 传递 应 用 程序 的 复杂 性 ， 且 在 应 用 程序 的 交互 性 和 状态 管理 变 得 越 
来 越 复 杂 的 情况 下 ，Redux 将 更 具 优势 。 这 是 因为 
(1) 所 有 数据 都 在 一 个 中 央 数 据 结构 中 ; 
(2) 数据 更 改 也 是 集中 处 理 的 ; 
(3) 视图 发 出 的 动作 与 发 生 的 状态 变化 是 解 耦 的 ; 
(4) 单 向 数据 流 使 系统 中 的 数据 变化 的 跟踪 变 得 容易 。 
有 了 Redux 的 核心 思想 ,我 们 已 准备 好 大 幅度 增加 消息 应 用 程序 的 功能 。 在 此 过 程 中 ， 我们 将 探 
索 在 现实 中 会 遇 到 的 各 种 挑战 的 解决 方案 。 
随 着 消息 应 用 程序 的 拓展 ， 我 们 将 涵盖 以 下 内 容 : 
如 何 使 用 redux 库 ; 
如 何 使 用 react-redux 库 ; 
如 何 处 理 更 复杂 的 状态 ; 
如 何 分 解 reducer ( 并 重新 组 合 ); 
如 何 重 新 组 织 React 组 件 。 
React 和 Redux 搭配 得 非常 好 ， 我 们 将 直接 看 到 它们 是 如 何 适 应 不 断 升 级 的 需求 的 。 
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Redux 中 间 件 








在 上 一 章 中 ， 我 们 学 习 了 一 个 特定 的 Flux 实现 一 一 Redux。 通 过 从 头 开始 构建 我 们 自己 的 Redux 
store, 并 将 store 与 React 组 件 集成 , 我 们 了 解 了 数据 是 如 何 通过 Redux 驱动 的 React 应 用 程序 流动 的 。 


本 章 将 通过 向 聊天 应 用 程序 添加 其 他 功能 来 构建 这 些 概 念 。 聊 天 应 用 程序 开始 看 起 来 会 像 一 个 真 
实 的 消息 传递 界面 。 


在 此 过 程 中 ,我们 将 探讨 处 理 更 复杂 的 状态 管理 的 策略 ， 还 会 直接 使 用 redux 库 中 的 几 个 函数 。 


11.1 准备 


在 本 书 代 码 中 ， 导 航 到 redux/chat_intermediate 目录 : 


$ cd redux/chat_intermediate 


此 应 用 程序 的 设置 与 上 一 章 的 聊天 应 用 程序 相 同 ， 都 由 create-react-app 提供 支持 : 


$ 1s 

README .md 
nightwatch. json 
package. json 
public 

semantic 
semantic. json 
src 

tests 

yarn.1lock 


查看 src/ 目 录 : 


$ 1s src/ 
App.js 

complete 
index.css 
index.js 


同样 , App. js 是 我 们 将 要 工作 的 地 方 , 它 包含 上 一 章 中 留 下 的 应 用 程序 。complete/ 包 含 App. js 
的 每 个 迭代 , 我 们 将 在 接 下 来 的 两 章 中 进行 构建 。 目 前 index. js 包含 App.js 的 最 终 版 本 , 并 将 其 挂 
载 到 DOM 中 。 
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像 往常 一 样 ， 运 行 npm install 来 安装 项 目的 所 有 依赖 项 : 


$ npm install 





然后 执行 npm start 来 启动 服务 器 : 


$ npm start 























接着 通过 在 浏览 器 中 访问 http://1localhost:3869 来 查看 完整 的 应 用 程序 。 



































在 聊天 应 用 程序 的 这 个 迭代 中 , 它 已 拥有 线程 ,每 条 消息 都 属于 拥有 该 消息 的 用 户 的 特定 线程 中 。 


























可 以 使 用 顶部 的 选项 卡 在 线程 之 间 切 换 。 




















注意 , 与 上 一 次 迭代 一 样 , 可 以 在 底部 的 文本 字段 中 添加 消息 , 也 可 以 通过 点 击 它们 来 删除 消息 。 
首先 在 src/index.js 中 换 入 App.js: 


import React from "react"; 
import ReactDOM from "react-dom"; 
import App from "./App"; 




















11.2 ”使 用 redux 库 的 createStore() 函数 


# 。 此 函数 创建 的 store 对 象 具有 三 个 方法 : getState()、dispatch() 和 subscribe()。 








在 上 一 章 中 ， 我 们 实现 了 自己 的 createStore()， 它 在 src/App .js 的 顶部 ， 和 上 一 章 结束 时 一 


























如 上 一 章 所 述 , 我 们 的 createStore( ) 函数 与 redux 库 提供 的 函数 非常 相似 。 让 我 们 删除 自己 的 





实现 并 使 用 redux 中 的 实现 。 





在 package. json 中 ,我们 已 包含 了 redux 库 : 


"Tedux “3.6:0", 


可 以 从 该 库 中 导入 createStore( ) 函数 : 


redux/chat intermediate/src/complete/App-1.js 








import { createStore } from 'redux'; 




















现在 我 们 可 以 从 App.js 中 删除 自己 定义 的 createStore( ) 困 数 。 

试 试 看 

要 验证 应 用 程序 能 否 正常 工作 ， 请 确保 服务 右 正 在 运行 。 如 未 运行 ， 请 执行 以 下 命令 : 
$ npm start 





























然后 在 http://localhost:3669 上 查看 该 应 用 程序 。 




















该 应 用 程序 的 行为 将 与 其 在 上 一 章 的 行为 相同 。 可 以 添加 新 消息 并 点 击 它 们 来 删除 。 
我 们 的 createStore( ) 函数 与 redux 库 附 带 的 createStore( ) 函数 存在 一 些 细微 的 行为 差异 。 目 














前 应 用 程序 尚未 触及 这 些 。 当 这 些 差异 出 现时 ， 我 们 会 子 以 解决 。 


11.3 将 消息 表示 为 处 于 状态 中 的 对 象 
11.3 ”将 消息 表示 为 处 于 状态 中 的 对 象 
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到 目前 为 止 ， 状 态 一 直 很 简单 。 它 是 一 个 对 象 ， 并 带 有 一 个 messages 属性 。 每 条 消息 都 是 一 个 
字符 串 : 

// 目前 状态 对 象 的 例子 

{ 


messages: [ 


"Roger . Eagle is undocked ' ， 
"Looking good.', 
版 
} 


为 了 使 我 们 的 应 用 程序 更 接近 真实 的 聊天 应 用 程序 ， 每 条 消息 都 需要 携带 更 多 的 数据 。 例 如 ,我 
们 可 能 希望 每 条 消息 都 指定 发 送 时 间或 发 送 者 ,为 了 支持 这 一 点 , 可 以 使 用 一 个 对 象 来 表示 每 条 消息 ， 
而 不 是 字符 串 。 
下 面 将 为 每 条 消息 添加 两 个 属性 : timestamp 和 id。 
// 新 的 状态 对 象 的 例子 
{ 
messages: [ 
// 一 条 消息 的 例子 
// 所 有 消息 现在 都 是 对 象 
{ 
text: 'Roger. Eagle is undocked ' ， 


timestamp: "1461974250213 ' ， 
id: '9da98285-4178 ' ， 




















J Te 
] 
} 


@ JavaScript 中 的 Date.now( ) 函数 返回 一 个 数字 , 该 数字 表示 自 1970-01-01 00:00 UTC 


以 来 的 毫秒 数 。 这 称 为 “Epoch” 或 “UNIX” 时 间 。 我 们 对 上 面 的 timestamp 属性 
使 用 了 这 种 表示 。 


可 以 使 用 Moment .js 之 类 的 JavaScript 库 来 呈现 更 人 性 化 的 时 间 戳 。 
为 了 支持 对 象 类 型 的 消息 ， 我 们 需要 调整 reducer 和 React 组 件 。 





11.3.1 修改 ADD_MESSACE 处 理 程序 





我 们 在 上 一 章 编写 的 reducer 函数 处 理 了 两 个 动作 , 分 别 是 ADD_MESSAGE 和 DELETE_MESSAGE。 让 
我 们 从 修改 ADD_MESSAGE 动作 处 理 程序 开始 。 





回想 一 下 ， 当 前 的 ADD_MESSAGE 动作 包含 了 一 个 message 属 改 
{ 





type: "ADD_MESSAGE ' ， 
message: 'Looking good.', 


} 
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reducer( ) 函数 接收 此 action 对 象 并 返回 一 个 带 有 messages 属性 的 新 对 象 messages 被 设置 为 
包含 先前 state.messages 的 新 数组 ， 并 附加 了 新 消息 


和 

















redux/chat_intermediate/src/complete/App-1.js 





function reducer(state, action) { 
if (action.type === 'ADD_MESSAGE') { 
return { 


messages: state.messages.concat(action.message), 


和 





我 们 调整 ADD_MESSAGE 动作 ， 使 其 使 用 text 属性 名 而 不 是 message: 


// 新 ADD_MESSAGE 示例 
{ 





type: 'ADD_MESSAGE', 


text: 'Looking good.', 
} 








text 将 匹配 我 们 用 于 消息 对 象 的 属性 名 。 











接 下 来 修改 reducer 的 ADD_MESSAGE 处 理 程序 ， 使 其 使 用 消 ， 


下 面 将 为 每 条 消息 对 象 提供 一 个 唯一 标识 符 。 我 们 已 在 package. json 中 包含 了 uuid 库 。 让 我 们 
在 src/App.js 的 顶部 将 其 导入 : 





息 对 象 而 不 是 字符 串 文 本 。 















































I 


redux/chat intermediate/src/complete/App-2.js 


import uuid from 'uuid'; 








接 下 来 修改 ADD_MESSAGE 处 理 程序 ， 使 其 可 以 创建 新 对 象 来 表示 消息 。 它 将 使 用 action .text 
为 text 属性 赋值 ， 然 后 再 生成 timestamp 和 id : 
































redux/chat intermediate/src/complete/App-2.js 





if (action.type === 'ADD_MESSAGE') { 
const newMessage = { 

text: action.text, 

timestamp: Date.now(), 

id: uuid.v4(), 

}; 





Date.now() 是 JavaScript 标准 库 的 一 部 分 。 它 以 毫秒 为 单位 返回 UNIX 时 间 格 式 的 
当前 时 间 。 





我 们 将 再 次 使 用 concat() 方 法 ， 这 次 返回 一 个 包含 state.messages 和 newMessage 的 新 数组 : 
redux/chat intermediate/src/complete/App-2.js 


return { 





messages: state.messages.concat(newMessage), 


}; 





11.3 将 消息 表示 为 处 于 状态 中 的 对 象 
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11.3.2 


消 


11.3.3 


MessageInput 组 件 在 用 户 点 击 提交 按钮 时 会 分 派 ADD_ 
使 它 使 用 text 属性 名 ， 而 不 是 该 action 对 象 的 message 


修改 后 的 完整 ADD_MESSAGE 处 理 程序 如 下 所 示 : 
redux/chat_ intermediate/src/complete/App-2.js 








if (action.type 'ADD_MESSAGE' ) { 
const newMessage = { 

text: action.text, 

timestamp: Date.now(), 

id: uuid.v4(), 


Ly 
return { 
messages: state.messages.concat(newMessage), 


上 








修改 DELETE_MESSAGE 处 理 程序 


出 
— 


目前 为 止 , DELETE_MESSAGE 动作 包含 一 个 index 





息 索引 : 


{ 
type: "DELETE_MESSACE ' ， 
index: 5, 


} 

















属性 , 即 要 删除 的 state .messages 数组 中 的 





目 


现在 所 有 的 消息 都 有 唯一 的 i9， 我们 可 以 这 样 使 用 它 : 


// 新 DELETE_MESSAGE 示例 


{ 
type: 'DELETE_MESSAGE', 
id: '9da98285-4178 ' ， 


} 


要 从 state.messages 























"删除 消息 ， 











redux/chat intermediate/src/complete/App-2.js 





可 以 使 用 Array 对 象 的 filter() 方 法 。filter() 方 法 返回 
一 个 新 数组 ， 包 含 所 有 “通过 ”提供 的 测试 函数 的 元 素 : 





} else if (action.type 'DELETE_MESSAGE') { 


return { 
messages: state.messages.filter((m) => ( 
m.id !== action.id 


)) 





这 里 构建 了 一 个 新 数组 ， 包 含 了 与 action 的 id 相对 应 的 对 象 之 外 的 所 有 对 象 。 


有 了 这 些 更 改 ，reducer 就 可 以 处 理 新 的 消息 对 象 了 。 接 下 来 将 修改 React 组 件 。 我 们 需要 修改 它 
们 发 出 的 动作 以 及 对 消息 的 泻 染 。 























修改 React 组 件 





ESSAGE 动作 。 我 们 需要 修改 这 个 组 件 ， 
属性 : 
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redux/chat intermediate/src/complete/App-2.js 





handleSubmit = () => { 
store.dispatch({ 


} 


type: "ADD_MESSAGCE ' ， 
text: this.state.value, 


站 


this .setState({ 


Value : 


/ 


六 


}; 





MessageView 组 件 在 用 户 点 


所 击 消息 时 会 分 派 一 个 DELETE_MESSAGE 动作 。 我 们 需要 调整 它 分 派 的 















































action 对 象 ， 使 它 使 用 id 属性 ， 而 不 是 index: 





redux/chat intermediate/src/complete/App-2.js 





class MessageView extends React.Component { 
handleClick = (id) => { 


地 


store.dispatch({ 
type: 'DELETE_MESSAGE', 
a Pm ke 
}); 


7 





然后 需 
timestamp 属性 。 要 泻 染 消息 的 文本 ， 我 们 需要 调用 message .text: 














要 修改 MessageView 组 件 的 render( ) 函数 。 我 们 将 修改 每 条 消息 的 HIML, 使 


4d, 














人 
落 





redux/chat intermediate/src/complete/App-2.js 





render() { 


const messages = 
<div 


this.props.messages.map((message, index) => ( 
className='comment" 

key={index} 

onClick={() => this.handleClick(message.id)} // Use “id. 


xdiv className='text'、>{/* 将 消息 数据 包装 在 div 标签 中 x*/} 
{message .text} 


<span className='metadata'>@{message.timestamp}</span> 





</div> 
</div> 
)); 
EY 
忆 


ZG， 








加 





现在 ， 


PE 示 逻辑 包装 在 一 个 类 为 text 的 div 标签 中 。 





现在 向 this.handleClick( ) 限 数 传人 的 是 message .id， 而 非 index。 我 们 将 每 条 消 









































reducer 和 React 组件 位 于 同一 个 页 面 上 。 我 们 正在 使 用 状态 和 动作 的 新 表示 形式 。 








保存 App. js。 如 果 服 务 器 还 没有 运行 ， 请 启动 它 : 


$ npm 


接着 导航 到 http://1localhost:38669 ( 见 图 11-1 )。 当 你 添加 消息 时 ， 每 条 


start 











条 消息 的 右 侧 应 该 会 显 
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示 一 个 时 间 戳 。 你 也 可 以 像 以 前 一 样 通过 点 击 它们 来 删除 。 








©O@ [Reduxchat 
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Chat 


The Eagle has wings. 642 


Roger The Eagleis undocked. 





图 11-1 导航 到 http://localhost :3000 


11.4 引入 多 线程 
状态 现在 使 用 的 是 消息 对 象 ， 这 将 允许 我 们 在 应 用 程序 中 携带 关于 每 条 消息 的 信息 ( 比如 timestamp )。 


但 为 了 让 我 们 的 应 用 程序 开始 反映 真实 的 聊天 应 用 程序 ， 则 需要 引入 男 一 个 概念 多 线程 。 
在 聊天 应 用 程序 中 ,“ 线 程 ”是 一 组 不 同 的 消息 。 一 个 线程 是 你 和 一 个 或 多 个 用 户 之 间 的 会 话 ( 见 











图 11-2 )。 
线程 1 线程 2 


BuzzAldrin Michael Collins 


Roger. Eagleis undocked. 


The Eagle has wings. 


图 11-2 界面 中 的 两 个 线程 
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如 该 应 用 程序 的 完整 版 本 所 演示 的 ,我 们 将 使 用 选项 卡 让 用 户 能 够 在 线程 之 间 切 换 。 每 条 消息 都 
隶属 于 一 个 线程 ， 见 图 11-3。 





线程 线程 2 








11-3 ”每 条 消息 都 属于 各 自 的 线程 




















为 了 支持 多 线程 ， 我 们 需要 更 新 状态 对 象 的 形状 。 顶 级 属性 现在 将 是 threads ， 它 是 一 个 线程 对 
和 象 数 组 。 每 个 线程 对 象 将 有 一 个 messages 属性 ， 其 中 包含 上 一 节 引 入 系统 的 消息 对 象 : 











threads: [ 
{ 
id: 'd7962357-4703'，// 线程 的 UUID 
title: 'Buzz Aldrin'，// 对 话 的 对 象 
messages: [ 


{ 
id: 'e8596e6b-97cc', 
text: 'Twelve minutes to ignition.', 
timestamp: 1462122634882 ， 


}; 
// 与 Buzz Aldrin 的 其 他 信息 


} 
pe 其 他 线程 (与 其 他 用 户 ) 


11.4.1 在 initialState 中 支持 多 线程 


为 了 文 持 多 线程 ， 让 我 们 首先 修改 初始 状态 。 
目前 ， 我 们 正在 将 状态 初始 化 为 一 个 具有 messages 属性 的 对 象 : 


redux/chat intermediate/src/complete/App-2.js 











const initialState = { messages: [] }; 





现在 ,我 们 希望 顶级 属性 是 threads ， 因 此 状态 可 以 初始 化 为 


{ threads: [] } 


但 这 很 快 就 会 给 应 用 程序 增加 很 多 复杂 性 。 我 们 不 仅 需要 更 新 reducer 以 支持 新 的 线程 驱动 的 状 
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态 ， 而 且 还 需要 添加 一 些 方法 来 创建 新 线程 。 
为 了 让 我 们 的 应 用 程序 能 够 模拟 现实 世界 中 的 聊天 应 用 程序 , 将 来 我 们 需要 具备 创建 新 线程 的 能 
力 。 但 就 目前 而 言 ， 可 以 采取 较 小 的 步 又 ， 只 需 使 用 一 组 硬 编码 的 线程 来 初始 化 状态 。 
现在 开始 修改 initialstate， 并 将 其 初始 化 为 具有 threads 属性 的 对 象 。 在 状态 中 ,我 们 将 有 
两 个 线程 对 象 


redux/chat intermediate/src/complete/App-3.js 






























































const initialState = { 
activeThreadId: '1-fca2'，// 新 的 状态 属性 
threads: [ // 状态 中 的 两 个 线程 
{ 
id: '1-fca2'，// 硬 编码 的 伪 UUID 
title: 'Buzz Aldrin', 
messages: [ 
{ // 该 线程 已 经 有 一 条 消息 
text: 'Twelve minutes to ignition.', 
timestamp: Date.now(), 
id: uuid.v4(), 
上 
], 


id: '2-be914', 
title: 'Michael Collins '， 
messages: [], 





因为 我 们 现在 正在 对 线程 的 id 进行 硬 编码 , 所 以 每 个 线程 都 使 用 了 UUID 的 剪辑 
版 本 。 
请 注意 , 初始 状态 对 象 包含 了 另 一 个 顶级 属性 : activeThreadId。 因为 前 端 一 次 只 显示 一 个 线程 ， 
且 视 图 需要 知道 要 显示 了 哪个 线程 ， 所 以 除了 线程 和 消息 ， 应 用 程序 还 应 该 具有 这 个 额 儿 的 状态 
这 里 将 其 初始 化 为 第 一 个 线程 ， 它 的 id 是 '1-fca2'。 
现在 有 了 一 个 初始 状态 对 象 ，React 组 件 可 以 使 用 它 来 演 染 应 用 程序 的 线程 版 本 。 我 们 将 首先 修 
改组 件 以 泻 染 这 个 新 状态 。 
不 过 ,应 用 程序 会 被 锁定 在 此 初始 状态 ， 我 们 将 无 法 添加 或 删除 任何 消息 ， 也 无 法 在 选项 卡 之 间 
切换 。 确 认 视 图 看 起 来 不 错 后 ， 我 们 将 修改 动作 和 reducer 以 支持 新 的 基于 线程 的 聊天 应 用 程序 。 
目前 ， 我 们 正在 使 用 messages 数组 中 已 有 的 一 条 消息 来 初始 化 第 一 个 线程 对 象 。 
在 reducer 支持 更 新 后 的 ADD_MESSAGE 动作 之 前 , 这 将 使 我 们 能 够 验证 React 组 件 是 
否 正确 地 使 用 了 一 条 消息 来 泻 染 线程 。 































































































390 第 11 章 Redux 中 间 件 





11.4.2 ”在 React 组 件 中 支持 多 线程 





为 了 在 应 用 程序 的 线程 之 间 切 换 ， 该 界面 需要 在 消息 视图 的 上 方 设置 选项 卡 。 我 们 需要 添加 新 的 








React 组 件 并 修改 现 有 组 件 来 支持 此 功能 。 
查看 本 章 的 聊天 应 用 程序 的 完整 版 本 ,我们 可 以 识别 出 以 下 组 件 ( 见 图 11-4 )。 
App 
ThreadTabs 





Buzz Aldrin Michael Collins 


Thread 


Roger. Eagle is undocked. 


The Eagle has wings. 


Messagelnput EY 


图 11-4 在 聊天 应 用 程序 的 完整 版 本 中 可 识别 出 的 组 件 


e@ App 组 件 : 顶级 组 件 。 
e@ ThreadTabs 组 件 : 用 于 在 线程 之 间 切 换 的 选项 卡 小 部 件 。 























e@ Thread 组 件 : 显示 一 个 线程 中 的 所 有 消息 。 此 组 件 之 前 的 名 称 是 MessageView， 但 我 们 将 更 


新 它 的 名 称 以 反映 新 的 基于 线程 的 状态 范式 。 











一 MessageInput 组 件 : 将 新 消息 添加 到 打开 线程 的 输入 组 件 。 可 以 把 它 通 套 在 Thread 组 件 下 。 





让 我 们 首先 修改 现 有 组 件 以 支持 基于 线程 的 状态 ， 然 后 再 添加 新 组 件 ThreadTabs。 
11.4.3 ”修改 App 组 件 








App 组 件 目前 订阅 了 store， 并 使 用 getstate( ) 方 法 来 读 取 messages 属性 ， 然 后 再 泻 染 它 的 两 个 








子 组 件 。 











小 


将 活动 线程 传递 给 Thread 组 件 ( 以 前 称 为 MessageView ) 以 泻 染 它 的 消息 。 


我 们 首先 从 状态 中 读 取 activeThreadId 和 threads, 然后 使 用 Array 的 find( ) 方 法 来 查找 
与 activeThreadId 匹配 的 id 的 线程 对 象 : 


redux/chat intermediate/src/complete/App-3.js 











我 们 将 让 组 件 使 用 状态 中 的 activeThreadId 属性 来 推断 哪个 线程 处 于 活动 状态 。 然 后 ， 该 组 件 




















具有 





class App extends React.Component { 
componentDidMount() { 
store.subscribe(() => this. forceUpdate()); 


} 


render() { 
const state = store.getState(); 
const activeThreadld = state.activeThreadld; 
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const threads = State .threads 
const activeThread = threads .find((tt) => t.id === activeThreadId) 








我 们 将 activeThread 传递 给 Thread 组 件 进行 泻 染 ， 并 从 App 组 件 中 删除 MessageInput 组 件 ， 
因为 它 现在 是 Thread 组 件 的 子 组 件 : 


redux/chat intermediate/src/complete/App-3.js 








return ( 
<div className='ui segment'> 
<Thread thread={activeThread} /> 
</div> 





| 
| 




















新 后 的 完整 App 组 件 如 下 所 示 : 
reduxchat intermediate/src/complete/App-3.js 





class App extends React.Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate()); 


} 


render() { 
const state = store.getState(); 
const activeThreadld = state.activeThreadld; 
const threads = state.threads; 
const activeThread = threads.find((t) => 七 .id === activeThreadId ) ; 


return ( 
<div className='ui segment'> 
<Thread thread={activeThread} /> 
</div> 
); 





11.4.4 ”将 MessageView 组 件 转换 为 Thread 组 件 
现在 ， 消 息 是 在 单个 线程 下 收集 的 ， 因 此 前 端 在 给 定 的 时 间 内 只 显示 一 个 线程 的 消息 。 我 们 将 
MessageView 重 命 名 为 Thread 来 反映 这 一 点 。 
Thread 组 件 将 泻 染 与 其 所 泻 染 的 线程 相关 的 消息 列表 ， 以 及 用 于 向 该 线程 添加 新 消息 的 MessageInput 
组 件 。 
首先 重 命名 该 组 件 : 


reduxchat intermediate/src/complete/App-3.js 













































































class Thread extends React.Component { 











现在 ， 要 在 render( ) 函数 中 创建 messages 数组 ， 我 们 将 使 用 this .props .thread.messages， 
而 非 this .props .messages: 
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redux/chat_intermediate/src/complete/App-3.js 
render() { 





const messages = this.props.thread.messages.map((message, index) => ( 





最 后 将 MessageInput 组 件 添加 为 Thread 组 件 的 子 组 件 。 虽 然 我 们 最 终 需 要 更 新 MessageInput 
组 件 来 正确 地 使 用 新 的 线程 状态 范式 ， 但 现在 暂时 不 进行 该 更 新 。 


redux/chat intermediate/src/complete/App-3.js 
return ( 








<div className='ui center aligned basic segment'> 
<div ClassName= ' ui comments'> 
{messages} 
《</div> 
<MessageInput /> 
</div> 


2) 





11.4.5 ” 试 试看 


保存 App. js。 接着 导航 到 http://1ocalhost:3880, 可 以 看 到 应 用 程序 只 有 一 条 消息 ( 见 图 11-5 )， 
即 我 们 在 initialstate 中 设置 的 消息 。 然 而 ， 我 们 不 能 添加 或 删除 任何 消息 


人 心 \o 
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图 11-5 应 用 程序 中 只 有 一 条 消 
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我 们 的 动作 和 reducer 还 不 支持 新 状态 。 不 过 ,在 更 新 它们 之 前 ,让 我 们 将 ThreadTabs 组 件 添加 
到 应 用 程序 中 。 





11.5 添加 ThreadTabs 组 件 





App 组 件 将 在 它 的 其 他 子 组 件 之 上 演 染 ThreadTab 组 件 。ThreadTabs 组 件 需要 一 个 线程 标题 列表 
来 演 染 选项 卡 。 当 选项 卡 被 点 击 了 ， 我 们 最 终 会 让 组 件 分 派 动 作 来 更 新 activeThreadId 状态 ,但 现 
在 只 让 它 演 染 线程 标题 。 
11.5.1 ”修改 App 组 件 
首先 准备 一 个 tabs 数组 ,这 个 数组 将 包含 与 ThreadTabs 组 件 演 染 每 个 选项 卡 所 需 的 信息 相对 应 
的 对 象 。 

ThreadTabs 组 件 需要 两 条 信息 : 

@ 每 个 选项 卡 的 title; 

@ 选项 卡 是 否 为 “活动 ”状态 。 

指示 选项 卡 是 否 处 于 活动 状态 是 出 于 样式 演 染 的 目的 ,下面 是 两 个 选项 卡 的 示例 。 在 标记 代码 中 ， 
左 侧 选项 卡 显示 为 活动 状态 ， 见 图 11-6。 














Active Tab Inactive Tab 


图 11-6 ”两 个 选项 卡 ， 左 侧 选 项 卡 显示 为 活动 状态 





在 App 组 件 的 render( ) 函数 中 ,我们 会 创建 一 个 tabs 对 象 数 组 。 每 个 对 象 将 包含 一 个 title 和 
一 个 active 属性 。active 属性 将 是 一 个 布尔 值 : 


redux/chat intermediate/src/complete/App-4.js 











const tabs = threads.map(t => ( 
{ // 一 个 选项 卡 对 象 
title: t.title, 
active: t.id === activeThreadId， 
} 
2)5 
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我 们 将 ThreadTabs 组 件 添加 到 App 组 件 的 标记 代码 中 ， 并 将 tabs 作为 一 个 属性 向 下 传递 : 


redux/chat intermediate/src/complete/App-4.js 








return ( 
<div className='ui segment'> 
<ThreadTabs tabs={tabs} /> 
<Thread thread={activeThread} /> 
</div> 


由 





11.5.2 ”创建 rphreadTabs 组 件 
接 下 来 在 App 组 件 声明 的 下 方 添加 ThreadTabs 组 件 。 在 点 击 某 个 选项 卡 时 ， 虽 然 我 们 很 快 就 会 
分 派 来 自 ThreadTabs 组 件 的 动作 ， 但 现在 它 只 会 为 选项 卡 泻 染 HTML。 
我 们 首先 对 this .props.tabs 进行 映射 ， 并 为 每 个 选项 卡 准备 标记 代码 。 在 Semantic UI 中 , 我 
们 会 将 每 个 选项 卡 表示 为 一 个 带 有 itenm 类 的 div 标签 。 活 动 的 选项 卡 有 一 个 active item 类 。 我 们 
会 将 index 用 于 每 个 选项 卡 中 React 必需 的 key 属性 : 


redux/chat intermediate/src/complete/App-4.js 









































class ThreadTabs extends React.Component { 
render() { 
const tabs = this.props.tabs.map((tab, index) => ( 
<div 
key={index} 
className={tab.active ? 'active item' : 'item'} 
> 
{tab.title} 
</div> 
四 
return ( 
<div className='ui top attached tabular menu'> 
{tabs} 
</div> 
2 
} 
} 





11.5.3” 试 试看 

保存 App. js。 确保 服务 器 仍 在 运行 ， 接 着 浏览 http://localhost:3600。 一 切 都 和 以 前 一 样 ， 
我 们 不 能 添加 或 删除 消息 ， 但 现在 界面 中 新 增 了 选项 卡 〈 见 图 11-7 )。 不 过 我 们 还 不 能 在 两 个 选项 卡 
之 间 切 换 。 
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图 11-7 界面 中 新 增 了 选项 卡 





第 一 个 线程 (Buzz Aldrin ) 是 活动 线程 。 与 其 对 应 的 tab 对 象 的 active 属性 将 设置 为 true。 
该 选项 卡 的 类 会 设置 为 active item， 这 使 我 们 可 以 很 直观 地 看 到 界面 上 的 活动 选项 卡 。 


我 们 已 更 新 了 状态 来 支持 多 线程 ， 且 React 组 件 已 能 基于 此 新 的 表示 形式 正确 地 泻 染 。 接 下 来 将 CO 





























通过 更 新 动作 和 reducer 来 使 用 这 个 新 的 状态 模型 ， 以 恢复 应 用 程序 的 交互 性 。 


11.6 在 reducer 中 支持 多 线程 
由 于 此 应 用 程序 的 状态 表示 方式 已 发 生变 化 ， 因 此 我 们 需要 更 新 reducer 中 的 动作 处 理 程序 。 


11.6.1 ”修改 reducer 中 的 ADD_MESSAGE 处 理 程序 


因为 消息 现在 属于 线程 , 所 以 ADD_MESSAGE 动作 处 理 程序 将 需要 向 特定 的 线程 添加 新 消息 。 我们 
将 向 此 action 对 象 添 加 一 个 threadId 属性 : 
{ 
type: 'ADD_MESSAGE', 
text: 'Looking good.', 
threadId: '1-fca2'，// 《<- 或 任何 合适 的 线程 
} 
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一 


之 前 , 我 们 在 reducer( ) 函数 中 的 ADD_MESSAGE 处 理 程序 中 创建 了 一 个 新 的 消息 对 象 ， 然后 使 月 
concat() 方 法 将 其 附加 到 state.messages。 

现在 ， 我 们 需要 执行 以 下 操作 : 

(1) 创建 新 的 消息 对 象 newMessage ; 

(2) 在 state.threads 中 找到 对 应 的 线程 (action.threadId ); 

(3) 将 newMessage 附加 到 thread.messages 的 末尾 。 

下 面 在 App. js 中 修改 一 下 reducer( ) 函数 。 

我 们 保留 newMessage 对 象 的 实例 化 。 接 下 来 通过 遍历 state.threads 并 标识 与 action.threadId 
相对 应 的 线程 来 定义 threadIndex : 


redux/chat intermediate/src/complete/App-5$.js 









































const newMessage = { 
text: action.text, 
timestamp: Date.now(), 
id: uuid.v4(), 

起 
const threadIndex = state.threads .findIndex( 
(七 ) => 七 .id === action.threadIq 

); 











现在 ， 我 们 可 能 和 忍 不 住 要 像 下 面 这 样 修改 线程 上 的 messages 属性 : 
// 这 样 做 很 吸引 人 ， 但 有 缺陷 


const thread = state.threads [threadIndex] ; 
thread.messages = thread.messages .concat(newMessage ) 
return State 


从 技术 上 讲 这 是 可 行 的 。thread 是 对 位 于 state.threads 中 的 线程 对 象 的 引用 。 因 此 ， 通 过 将 
thread.messages 设置 为 包含 新 消息 的 新 数组 ， 我 们 同时 也 修改 了 在 state.threads 中 的 线程 对 象 。 

日 这 会 改变 状态 。 如 上 一 章 所 述 ，reducer( ) 必 须 是 一 个 纯 函 数 。 这 意味 着 需要 将 状态 对 象 视 为 
只 读 。 
因此 不 能 修改 thread 对 象 。 相 反 ， 可 以 创建 一 个 包含 更 新 后 的 thread.messages 属性 的 新 线程 
对 象 。 
因此 从 之 前 的 经 验 来 看 ， 我 们 需要 添加 一 些 细节 到 计划 中 ， 如 下 所 示 : 

(1) 创建 新 的 消息 对 象 newMessage; 

(2) 在 state.threads 中 找到 对 应 的 线程 (state.activeThreadId ); 

(3) 创建 一 个 新 的 线程 对 象 ， 其 中 包含 原始 线程 对 象 的 所 有 属性 ， 再 加 上 一 个 更 新 后 的 messages 
属性 ; 

(4) 返回 带 有 一 个 threads 属性 的 state， 该 属性 包含 了 新 的 线程 对 象 ， 并 代替 了 原来 的 对 象 。 

我 们 已 完成 了 第 一 步 : 定义 了 threadIndex。 让 我 们 看 看 如 何 创建 新 的 线程 对 象 : 
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redux/chat_ intermediate/src/complete/App-S.js 





const oldThread = state.threads [threadIndex] 
const newThread = { 

...0ldThread, 

messages: oldThread.messages.concat(newMessage), 


} 

















为 了 创建 newThread ， 我 们 使 用 了 一 个 实验 性 的 JavaScript 特性 : 对 象 的 扩展 语法 。 我 们 在 上 一 
章 对 数组 使 用 了 扩展 语法 , 并 基于 现 有 数组 的 区 块 创建 了 一 个 新 数组 。 数 组 的 扩展 语法 是 在 ES6 中 引 
人 的 。 这 里 使 用 它 基 于 现 有 对 象 的 属性 来 创建 一 个 新 对 象 。 

以 下 代码 会 将 所 有 的 属性 从 oldThread 复制 到 newThread : 

redux/chat intermediate/src/complete/App-5$.js 
























































.. .0oldThread, 





I 





然后 下 面 的 代码 会 将 newThread 的 messages 
redux/chat intermediate/src/complete/App-S.js 




















三 
项 





时 性 设置 为 包含 newMessage 的 新 消息 数组 : 





messages: oldThread.messages.concat(newMessage ) ， 














注意 ， 通 过 让 messages 属性 出 现在 oldThread 之 后 ， 实 际 上 “覆盖 ”了 来 自 oldThread 的 
messages 属性 。 
也 可 以 使 用 object .assign( ) 方 法 来 完成 相同 的 操作 : 


Object.assign({}, oldThread, { 
messages: oldThread.messages .concat(newMessage ) ， 


}); 

你 可 能 还 记得 ，0bject.assign() 方 法 的 第 一 个 参数 是 目标 对 象 。 你 可 以 传人 尽 可 能 多 的 其 他 参 
它们 就 是 你 要 从 中 复制 属性 的 所 有 对 象 。 

我 们 因为 在 Redux 中 使 用 纯 reducer 函数 时 执行 了 大 量 类 似 的 操作 ， 所 以 更 喜欢 简洁 的 对 象 扩展 
操作 符 语法 。 


对 象 的 扩展 操作 符 〈...) 

在 ES6 中 为 数组 引入 了 扩展 运算 符 。 对 于 对 象 ， 扩 展 操作 符 仍然 是 一 个 “第 3 阶段 ”的 提议 。 
它 很 可 能 会 被 批准 并 包含 在 未 来 的 JavaScript 版 本 中 。 

本 书 对 使 用 实验 性 的 JavaScript 特性 非常 谨慎 。 我 们 一 直 在 使 用 属性 初始 化 器 ， 这 是 书 中 的 另 
一 个 实验 性 特性 ， 因 为 React 社区 一 直 在 大 量 使 用 它们 。Redux 社区 和 对 象 的 扩展 操作 符 也 是 如 此 。 
因此 ， 我 们 会 在 这 个 项 目 中 使 用 它 。 

package. json 中 包含 的 Babel 预 设 stage-@ 已 支持 该 语法 。stage-@ 包括 所 有 “第 3 阶段 ”的 
JavaScript 提议 。 
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用 法 
省 略 号 (... ) 操作 符 会 将 


const commonDolphin = { 
family: 'Delphinidae', 
genus: "Delphinus '， 


已 


const longBeakedDolphin = { 
. .CommonDolphin, 
species: 'D. capensis', 


// => 

//{ 

// family: 'Delphinidae', 
// genus: "Delphinus '， 

// species: 'D. capensis', 


从 号 


const spottedDolphin = { 
. .CommonDolphin, 
genus: 'Stenella', 
species: 'S. attenuata', 


// => 

// 1 

// family: 'Delphinidae', 
// genus: 'Stenella', 

yy species: 'S. attenuata ' ， 


Le 


. .SpottedDolphin, 
species: 'S. frontalis '， 


// => 

ZA 

// family: 'Delphinidae', 
A genus: 'Stenella', 

{1 species: 'S. frontalis '， 


A 
扩展 操作 符 使 我 们 能 





const atlanticSpottedDolphin = { 


一 个 对 象 复制 到 另 一 个 对 象 中 : 


E 够 通过 复制 tt 地 构造 新 对 象 。 由 于 这 个 特性 , 我 们 会 
经 常 使 用 这 个 操作 符 来 保持 reducer 函数 的 纯粹 小 





现在 有 了 
的 messages 属性 除外 。 











最 后 一 步 是 返回 更 新 后 的 状态 。 我 们 要 返回 一 个 
原始 线程 列表 ， 但 不 包括 已 经 被 新 线程 对 象 “替换 ”的 旧 线程 。 


可 以 重用 之 前 的 策略 来 创建 一 个 包含 





























一 个 newThread 对 象 , 该 对 象 包含 原始 线程 的 所 有 属 


ml 
































前 一 个 数组 区 块 的 新 数组 。 数 组 


性 , 但 更 新 后 的 包含 要 添加 的 消息 


具有 state .threads 属性 的 对 象 , 并 将 其 











:有 需 























设置 为 























要 替换 的 线程 索引 
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(threadIndex )。 让 我 们 创建 一 个 新 数组 ， 如 下 所 示 : 
@ 包含 state.threads 中 索引 在 threadIndex 之 前 的 所 有 线程 ， 但 不 包括 threadIndex; 


@ 包含 newThread; 
@ 包含 state.threads 中 索引 在 threadIndex 之 后 的 所 有 线程 。 


代码 如 下 所 示 : 


// 构建 新 的 线程 数组 

[ 
.. .State.threads.slice(0, threadIndex), // 一 直到 七 hreadIndex 
newThread, // 插入 新 线程 对 象 
.. .State.threads.slice( 

threadIndex + 1, state.threads.length // threadIndex 之 后 
] 
不 能 将 state.threads 设置 为 此 新 数组 ， 因 为 这 会 修改 状态 。 相 反 ， 可 以 创建 一 个 新 对 象 , 并 再 
次 使 用 扩展 操作 符 将 所 有 状态 属性 复制 到 新 对 象 中 。 然 后 ， 可 以 用 新 数组 覆盖 threads 属性 : 


redux/chat intermediate/Ssrc/complete/App-S.js 



























































本 














return { 
.. .State， 
threads: [ 
.. .State.threads.slice(0, threadIndex), 
newThread, 
.. .State.threads.slicel( 
threadlndex + 1, state.threads.1length 

















修改 ADD_MESSAGE 处 理 程序 需要 一 些 新 概念 , 但 现在 有 了 一 个 将 来 会 复 用 的 重要 策略 : 如 何 更 新 
状态 对 象 ， 同 时 避免 修改 状态 。 
处 理 ADD_MESSAGE 动作 的 完整 新 逻辑 ， 如 下 所 示 : 


redux/chat intermediate/Ssrc/complete/App-S.js 














if (action.type === 'ADD_MESSAGE') { 
const newMessage = { 
text : action.text, 
timestamp: Date.now(), 
id: uuid.v4(), 


Ly 

const threadIndex = state.threads.findIndex( 
(t) => 七 .id === action.threadIq 

3 


state.threads [threadIndex] ; 
{ 


const oldThread 
const newThread 
.. .oldThread, 
messages: oldThread.messages.concat(newMessage), 


}; 
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return { 
.. .State, 
threads: [ 
.. .State.threads.slice(0, threadIndex), 
newThread, 
.. .State.threads.slice( 
threadIndex + 1, state.threads.1length 











将 多 线程 引入 状态 中 极 大 地 增加 了 这 个 动作 处 理 程序 的 复杂 性 。 不 过 我 们 将 很 快 去 探索 如 何 将 这 





























个 动作 处 理 程序 拆 分 成 更 小 块 的 方法 。 下 面 修 改 分 派 ADD_MESSAGE 动作 的 


要 修改 : MessageInput 组 件 。 


11.6.2 ”修改 MessageInput 组 件 
ADD_MESSAGE 动作 对 象 现在 应 包含 threadId 属性 。 

















区 域 。 不 过 只 有 一 个 区 域 





需 


MessageInput 是 分 派 此 动作 的 唯一 组 件 ,。 该 组 件 应 该 将 threadId 设置 为 活动 线程 的 id。 我 们 将 




















Thread 组 件 的 活动 线程 id 作为 属性 传递 给 MessageInput 组 件 : 


redux/chat intermediate/src/complete/App-5$.js 











return ( 
<dqiv className='ui center aligned basic segment'> 
<div className='ui Comments > 
{messages} 
</div> 
<MessageInput threadId={this.props.thread.id} /> 
</div> 
好 
} 








然后 ， 可 以 从 MessageInput 组 件 的 this.props 中 读 取 数据 ， 以 将 threadId 设置 到 action 对 


象 上 : 


redux/chat intermediate/Ssrc/complete/App-S.js 





handleSubmit = () => { 
store.dispatch({ 
type: 'ADD_MESSAGE', 
text: this.state.value, 
threadId: this.props.threadld, 
}); 
this.setState({ 
Value: '! 
于 六 
}; 


/ 
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通过 使 用 MessageInput 组 件 分 派 更 新 后 的 ADD_MESSAGE 动作 ， 让 我 们 来 验证 添加 消息 的 功能 是 
否 已 经 正常 。 


11.6.3” 试 试看 
保存 App. js, 并 刷新 http://1localhost:3889, 我 们 看 到 现在 可 以 再 次 提交 消息 了 ( 见 图 11-8 )。 





OO (mRodxchat 


-一 CE 口 localhost:3000 


Chat 


Buzz Aldrin Michael Collins 


Twelve minutes to ignition. 


Roger Good readback, Buzz. Out 


Neil, I'm maneuvering in roll. 





图 11-8 刷新 http:localhost:30096 的 页 面 


我 们 仍 不 能 删除 消息 或 在 线程 之 间 切 换 。 不 过 可 以 先 集中 精力 修改 DELETE_MESSAGE 动作 。 


11.6.4 ”修改 reducer 中 的 DELETE_MESSAGE 处理 程 序 

DELETE_MESSAGE 动作 当前 带 有 属性 idq, 该 id 用 来 指示 应 删除 的 消息 。 虽然 应 用 程序 日 前 只 允许 
从 活动 线程 中 删除 一 条 消息 ， 但 我 们 将 编写 一 个 reducer， 使 其 能 在 所 有 线程 中 搜索 匹配 的 消息 。 

当 我 们 从 状态 中 删除 一 条 消息 时 , 将 面临 与 ADD_MESSAGE 处 理 程序 类 似 的 挑战 。 这 是 因为 消息 位 
于 线程 的 messages 数组 中 ,但 是 我 们 不 能 修改 处 于 状态 中 的 线程 对 象 。 

可 以 使 用 一 个 类 似 的 策略 : 

(1) 获取 包含 要 删除 的 消息 的 线程 ; 

(2) 创建 一 个 新 的 线程 对 象 ， 其 中 包含 原始 线程 对 象 的 所 有 属性 ， 以 及 一 个 更 新 后 的 messages 属 
性 ， 该 属性 不 包含 我 们 要 删除 的 消息 ; 

(3) 返回 一 个 包含 threads 属性 的 state ， 该 属性 包含 新 的 线程 对 象 ， 用 于 代替 原始 的 线程 对 象 。 



























































a 
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下 面 修改 reducer 的 DELETE_MESSAGE 处 理 程序 。 
首先 确定 包含 要 删除 的 消息 的 线程 : 


redux/chat intermediate/src/complete/App-6.js 
























































} else if (action.type === 'DELETE_MESSAGE') { 
const threadIndex = state.threads.findIndex( 
(t) => 七 .messages.find((m) => ( 
m.id === action.id 


)) 


const oldThread = state.threads[threadIndex]; 











在 findIndex() 方 法 的 回调 函数 中 ， 我 们 对 该 线程 的 messages 属性 执行 了 find() 方 法 。 如 果 

















find() 方 法 找到 了 与 action 的 id 匹配 的 消息 , 则 返回 该 消 





数 ， 意 味 着 该 函数 将 返回 线程 的 索引 。 
































息 。 这 满足 了 findIndex() 方 法 的 测试 函 








我 们 接 下 来 创建 一 个 新 的 线程 对 象 , 并 使 用 扩展 语法 将 所 有 属性 从 oldThread 复制 到 这 个 新 对 象 
中 ; 然后 像 以 前 一 样 通过 使 用 filter() 函数 来 覆盖 messages 属性 ,并 生成 不 包含 已 删除 的 消息 的 新 





数组 : 


redux/chat intermediate/src/complete/App-6.js 














const newThread = { 
...0ldThread, 
messages: oldThread.messages.filter((m) => (人 
m.id !== action.id 
)), 
上 








DELETE_MESSAGE 处 理 程序 的 return 语句 与 ADD_MESSAGE 的 return 语句 相同 。 我 们 正在 执行 相 
同 的 操作 ， 即 最 终 希望 用 新 的 线程 对 象 来 “替换 ”处 于 state.threads 中 的 原始 线程 对 象 。 因 此 我 们 


需要 执行 以 下 操作 : 
(1) 创建 一 个 新 对 象 并 复制 state 中 的 所 有 属性 ; 












































(2) 使 用 新 的 线程 数组 来 覆盖 threads 属性 , 且 该 数组 已 使 用 新 的 线程 对 象 替换 了 原始 的 线程 对 象 。 








同样 ， 代 码 也 和 ADD_MESSAGE 处 理 程序 中 的 相同 : 


redux/chat_intermediate/src/complete/App-6.js 





return { 
.. .State, 
threads: [ 
.. .State.threads.slice(0, threadIndex), 
newThread, 
.. .state.threads.slice( 
threadIndex + 1, state.threads.1length 
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完整 的 DELETE_MESSAGE 动作 处 理 程序 如 下 所 示 : 


redux/chat intermediate/src/complete/App-6.js 








} else if (action.type === 'DELETE_MESSAGE') { 
const threadIndex = state.threads.findIndex( 
(t) => t.messages.find((m) => (人 
m.id === action.id 
)) 
3 


const oldThread = state.threads[threadIndex]; 


const newThread = { 
.. .oldThread, 
messages: oldThread.messages.filter((m) => (人 
m.id !== action.id 
)), 
by 


return { 
.. .State, 
threads: [ 
.. .State.threads.slice(0, threadIindex), 
newThread, 
.. .State.threads.slice( 
threadIindex + 1, state.threads.1length 





这 个 动作 处 理 程序 的 复杂 性 与 ADD_MESSAGE 一 样 ， 且 由 于 引入 了 多 线程 而 变 得 非常 复杂 。 此 外 ， 
我 们 已 看 到 两 个 动作 处 理 程序 之 间 出 现 了 类 似 的 模式 : 它们 都 实例 化 了 一 个 新 的 线程 对 象 ， 且 该 对 象 
是 现 有 线程 对 象 的 派生 对 象 ; 它们 都 将 这 个 线程 对 象 与 处 于 状态 中 需要 “修改 ”的 线程 对 象 进行 替换 。 

我 们 很 快 会 探索 一 种 新 策略 来 共享 这 段 代 码 并 拆 分 这 些 过 程 。 但 现在 ， 让 我 们 再 次 测试 删除 消息 
的 功能 。 


11.6.5“ 试 试看 


保存 App.js， 并 确保 你 的 服务 器 正在 运行 ， 然 后 导航 到 http://1ocalhost:3860。 添 加 和 删除 
消息 功能 现在 都 可 以 正常 使 用 ( 见 图 11-9 )。 
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€ CG OD localhost:3000 





Chat 











图 11-9 导航 到 http:1ocalhost:3600 


然而 ， 点 击 选 项 卡 上 的 切换 线程 仍 不 起 作用 。 我 们 在 初始 化 状态 时 将 activeThreadId 设置 为 
'1-fca2' ,但 是 在 系统 中 没有 任何 操作 可 以 修改 这 部 分 状态 。 





11.7 添加 OPEN_THREAD 动作 
我 们 将 引入 另 一 个 动作 : OPEN_THREAD。 每 当 用 户 点 击 线程 选项 卡 来 打开 它 时 ，React 都 会 分 派 此 
动作 。 此 动作 最 终 会 修改 state 中 的 activeThreadId 属性 。 


ThreadTabs 组 件 将 负责 分 派 这 个 动作 。 
11.7.1 action 对 象 


action 对 象 只 需要 指定 用 户 想 要 打开 的 线程 的 id: 


{ 

type: 'OPEN_THREAD', 

id: '2-be91'，// <- 或 任何 合适 的 id 
} 








11.7.2 ”修改 reducer 

让 我 们 在 reducer 中 添加 另 一 个 子 句 来 处 理 这 个 新 动作 。 我 们 将 在 DELETE_MESSAGE 子 句 下 方 , 但 
在 最 后 的 else 语句 之 前 添加 这 个 子 句 。 

我 们 不 能 直接 修改 state 对 象 : 


// 不 正确 的 做 法 
} else if (action.type === 'OPEN_THREAD') { 
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state.activeThreadld = action.id; 
return state; 


} 


相反 ， 我 们 将 把 所 有 属性 从 state 复 
性 : 














央 到 一 个 新 对 象 中 ， 并 覆盖 这 个 新 对 象 的 activeThreadId 











三 


eal 


redux/chat_ intermediate/src/complete/App-7.js 





} else if (action.type === 'OPEN_THREAD') { 
return { 


.. .State, 
activeThreadld: action.id， 


二 














使 用 此 策略 ， 我 们 将 不 会 修改 状态 。 





下 面 我 们 只 需 在 点 击 某 个 选项 卡 时 ， 让 ThreadTabs 组 件 分 派 这 个 动作 就 可 以 了 。 


11.7.3” 从 ThreadTabs 组 件 分 派 动作 


为 了 让 ThreadTabs 分 派 OPEN_THREAD 动作 ， 需 要 给 它 被 点 击 的 线程 id。 


现在 提供 给 ThreadTabs 组 件 的 tab 对 象 包 含 了 title 和 active 










































































属性 。 需 要 修改 App 组 件 中 对 
tabs 的 实例 化 代码 以 包含 id 属性 。 
让 我 们 先 做 这 个 。 在 App 组 件 内 部 ， 将 id 属性 添加 到 我 们 创建 的 tab 对象 中 : 
redux/chat_ intermediate/src/complete/App-7.js 
const tabs = threads.map(t => ( 
{ 
title: t.title, 
active: t.id === activeThreadId， 
id: 七 .id， 
} 
)); 
接 下 来 ， 把 nandleclick 组 件 函 数 添加 到 ThreadTabs 组 件 中 。 该 函数 接收 id: 
redux/chat_ intermediate/src/complete/App-7.js 
class ThreadTabs extends React.Component { 
handleClick = (id) => { 
store.dispatch({ 
type: 'OPEN_THREAD', 
id: id， 
}); 
最 后 ,为 每 个 选项 卡 的 div 标签 添加 一 个 onclick 属性 。 我 们 将 其 设置 为 一 个 函数 ,该 函数 会 使 
用 线程 的 id 来 调用 handleClick 函数 : 
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redux/chat intermediate/src/complete/App-7.js 





const tabs = this.props.tabs.map((tab, index) => ( 
<div 

key={index} 

className={tab.active ? 'active item' : 'item'} 

onClick={() => this.handleClick(tab.id)} 

> 





ThreadTabs 组 件 现 在 在 发 出 新 动作 ， 让 我 们 测试 一 下 。 
11.7.4” 试 试看 


保存 App. js， 并 在 浏览 器 中 打开 http://localhost:3606 ( 见 图 11-10 )。 此 时 ， 我们 已 可 以 添 


加 和 删除 消息 了 ， 且 可 以 在 选项 卡 之 间 进 行 切换 。 如 果 我 们 添加 一 条 消息 到 一 个 线程 ,那么 它 只 会 被 
添加 到 该 线程 中 。 











oes [DD Redux Chat 





人 CG [DD localhost:3000 < 





Chat 


Buzz Aldrin Michael Collins 


You're going right down U.S. 1, Mike. 





图 11-10 打开 http://localhost:36096 的 页 面 


这 看 起 来 开始 像 一 个 实际 的 聊天 应 用 程序 了 ! 我 们 引入 了 多 线程 的 概念 ， 且 现在 的 界面 支持 在 与 
多 个 用 户 的 会 话 之 间 进 行 切 换 。 

















然而 ， 在 此 过 程 中 大 大 增加 了 reducer 函数 的 复杂 性 。 虽 然 可 以 在 一 个 位 置 管理 所 有 的 状态 ， 这 
样 很 不 错 ， 但 每 个 动作 处 理 程序 都 包含 了 很 多 逻辑 














。 此 外 ，ADD_MESSAGE 和 DELETE_MESSAGE 处 理 程 
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序 重 复 了 很 多 相同 的 代码 。 

同样 奇怪 的 是 ， 两 个 不 同 状态 的 管理 ( 添加 /删除 消息 和 线程 之 间 的 切换 ) 都 在 同一 位 置 进 行 。 随 
着 应 用 程序 复杂 性 的 不 断 增 加 ,使 用 单一 的 reducer 函数 来 管理 整个 状态 的 想法 可 能 会 让 人 感到 车 惯 ， 
甚至 人 们 会 对 它 的 合理 性 感到 怀疑 。 


实际 上 ，Redux 应 用 程序 有 一 种 拆 分 状态 管理 逻辑 的 策略 : reducer 组 合 











11.8 拆 分 reducer 函数 


通过 使 用 reducer 组 合 ， 我 们 可 以 将 应 用 程序 的 状态 管理 逻辑 拆 分 成 更 小 的 函数 。 我 们 仍 会 给 
createStore() 方 法 传递 一 个 reducer 国 数 。 但 这 个 顶级 函数 随后 将 调用 一 个 或 多 个 其 他 函数 。 每 个 
reducer 函数 都 将 管理 状态 树 的 不 同 部 分 。 


添加 和 删除 消息 和 在 线程 之 间 切 换 隶 属于 不 同 的 功能 块 。 我 们 先 把 这 两 个 分 开 。 


11.8.1 新 的 reducer() 函数 


我 们 仍 会 调用 顶级 reducer( ) 函数 。 不 过 现在 将 有 两 个 其 他 的 reducer 函数 , 每 个 都 管理 着 各 自 的 
那 部 分 状态 的 顶级 属性 。 我 们 将 以 它们 管理 的 属性 名 来 命名 这 些 reducer 子 函数 ， 见 图 11-11。 


























state.activeThreadId | activeThreadIdReducer( ) 
state threads -二 国生 [esiTre sa 的) 


11-11 以 管理 reducer( ) 隆 数 的 属性 名 命名 的 reducer 子 函数 
要 实现 这 一 点 , 让 我 们 首先 看 看 新 的 顶级 reducer( ) 函数 应 该 是 什么 样 的 ; 然后 可 以 创建 reducer 
子 函 数 。 
为 了 避免 混淆 ， 我 们 会 将 当前 的 reducer( ) 函数 重 命 名 为 threadsReducer( ) : 
redux/chat intermediate/src/complete/App-8.js 














function threadsReducer(state, action) { 





我 们 仍 需 要 调整 此 函数 ， 但 会 在 稍 后 进行 。 
下 面 在 threadsReducer( ) 函数 上 方 搬入 新 的 reducer( ) 水 数 : 
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redux/chat intermediate/src/complete/App-8.js 





function reducer(state, action) { 
return { 
activeThreadId: activeThreadIdReducer(state.activeThreadId，action)， 
threads: threadsReducer(state.threads, action), 
hy 
} 











个 函数 很 短 ， 但 做 了 很 多 事情 。 
我 们 会 返回 一 个 全 新 的 对 象 ， 包 含 activeThreadId 和 threads 两 个 键 。 重 要 的 是 ， 我 们 将 更 新 
activeThreadId 和 threads 的 职责 委托 给 了 它们 各 自 的 reducer。 
再 来 看 看 这 一 


redux/chat intermediate/src/complete/App-8.js 








activeThreadId: activeThreadIdReducer(state.activeThreadId，action) ， 











对 于 处 于 下 一 个 状态 的 activeThreadId 属性 ， 我们 将 职责 委托 给 activeThreadIdReducer( ) 函 
数 (尚未 定义 )。 注 意 ， 第 一 个 参数 并 不 是 整个 状态 ， 而 只 是 该 reducer 负责 的 状态 的 那 一 部 分 。 我 们 
将 action 作为 第 二 个 参数 传人 。 

对 threads 也 采用 相同 的 策略 : 


redux/chat intermediate/src/complete/App-8.js 






































threads: threadsReducer(state.threads, action), 











我 们 将 状态 的 threads 属性 的 职责 委托 给 threadsReducer( ) 函数 ,我们 传递 给 该 reducer 的 状态 
(第 一 个 参数 ) 是 threadsReducer( ) 函数 负责 更 新 的 那 一 部 分 状态 。 


这 就 是 子 reducer 与 顶级 reducer 协同 工作 的 方式 。 顶级 reducer 会 将 状态 树 拆 分 成 许多 部 分 , 并 将 
这 些 状态 块 的 管理 委托 给 适当 的 reducer。 


为 了 更 好 地 理解 ， 让 我 们 在 reducer() 函数 下 方 编写 activeThreadIdReducer( ) 函数 ; 


redux/chat_intermediate/src/complete/App-8.js 

































































function activeThreadIdReducer(state, action) { 
if (action.type === 'OPEN_THREAD') { 
return action.id; 
} else { 
return state; 
} 
} 








这 个 reducer 只 处 理 一 种 类 型 的 动作 ， 即 OPEN_THREAD。 请 记 住 ,传递 给 reducer 的 state 参数 实际 上 
是 state.activeThreadId。 这 是 该 reducer 唯一 需要 关心 的 那 部 分 状态 。 因 此 , activeThreadIdReducer() 
函数 接收 一 个 字符 串 作 为 state (线程 的 idq )， 并 将 返回 一 个 字符 串 。 


注意 看 它 是 如 何 简 化 了 处 理 OPEN_THREAD 的 逻辑 。 之 前 , 逻辑 必须 考虑 整个 状态 树 。 因 此 我 们 必 
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须 创 建 一 个 新 对 象 ， 并 复制 所 有 的 状态 属性 ， 然 后 再 覆盖 activeThreadId 属性 。 而 现在 ，reducer 只 
需 考 虑 这 一 属性 即 可 。 

如 果 动 作 类 型 是 OPEN_THREAD ， 则 activeThreadIdReducer( ) 函 数 只 返回 action.id， 即 要 打开 
的 线程 的 id。 和 否则， 它 返 回 传 人 的 id。 


在 reducer() 国 数 中 ，activeThreadIdReducer() 函数 的 返回 值 将 被 设置 为 新 状态 对 象 中 的 
activeThreadId 属性 。 


接 下 来 修改 threadsReducer( ) 滑 数 。 之 前 ， 此 函数 接收 了 整个 状态 对 象 。 而 现在 它 只 接收 自己 
的 那 一 部 分 : state.threads。 因 此 ， 我 们 将 能 够 简化 一 些 代码 。 


11.8.2 ”修改 threadsReducer( ) 函数 
threadsReducer( ) 函数 现在 只 接收 状态 的 一 部 分 。 它 的 state 参数 实际 上 是 线程 数组 。 


因此 , 可 以 像 在 activeThreadIdReducer() 函数 中 做 的 那样 来 简化 返回 值 。 我 们 不 再 需要 创建 一 
个 新 的 状态 对 象 , 并 复制 所 有 旧 的 值 , 然后 覆盖 threads 属性 。 相 反 , 可 以 只 返回 更 新 后 的 线程 数组 。 


此 外 ， 我 们 将 引用 state ， 而 不 是 在 任何 地 方 都 引用 state.threads ， 因 为 现在 state 就 是 该 线 
程 数组 。 

让 我 们 先 对 ADD_MESSAGE 处 理 程序 进行 这 些 修 改 。 

我 们 将 引用 state 而 不 是 state.threads : 

redux/chat_ intermediate/Ssrc/complete/App-8.js 


































































































const threadIndex = state.findIndex( 
(t) => t.id === action.threadId 
3 


const oldThread = state[threadIndex] ; 


const newThread { 
. .oldThread, 
messages: oldThread.messages.concat(newMessage), 


后 








对 于 return 语句 ， 不 再 需要 返回 一 个 完整 的 状态 对 象 ， 而 只 需要 返回 线程 数组 : 
redux/chat intermediate/src/complete/App-8.js 








return [ 
. .State.slice(0, threadIndex), 
newThread, 
. .State.slice( 
threadIndex + 1, state.1length 
3 
区 





DELETE_MESSAGE 处 理 程序 会 得 到 相同 的 处 理 。 
首先 把 引用 从 state.threads 更 改 为 state: 
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redux/chat intermediate/src/complete/App-8.js 





} else if (action.type === 'DELETE_MESSAGE') { 
const threadIndex = state.findIndex( 
(t) => 七 .messages.find((m) => ( 
m: 1d === Hebioritd 
)) 
5 


const oldThread = state[threadIndex] ; 





然后 只 返回 数组 ， 而 不 是 整个 状态 对 象 : 


redux/chat intermediate/src/complete/App-8.js 





return [ 
.. .State.slice(0, threadIndex), 
newThread, 
.. .State.slice( 
threadlindex + 1, state.1length 
5 
把 





最 后 可 以 从 threadsReducer( ) 郴 数 中 删除 OPEN_THREAD 处 理 程 








本 





序 。 这 是 因为 reducer 不 需要 关心 








OPEN_THREAD 动作 。 该 动作 所 属 状 态 树 的 那 一 部 分 ， 该 reducer 不 会 使 用 到 。 因 此 ， 无 论 何 时 接收 到 
该 动作 ， 该 函数 都 会 到 达 最 后 一 个 else 子 句 并 只 返回 未 修改 的 状态 。 








更 新 后 的 完整 threadsReducer( ) 函数 如 下 所 示 : 


redux/chat intermediate/Src/complete/App-8.js 














function threadsReducer(state, action) { 
if (action.type === 'ADD_MESSAGE') { 
const newMessage = { 
text: action.text, 
timestamp: Date.now(), 
id: uuid.v4(), 


}; 

const threadIndex = state.findIndex( 
(t) => t.id === action.threadIdq 

); 


const oldThread = state[threadIndex] ; 
const newThread = { 
.. .oldThread, 
messages: oldThread.messages.concat(newMessage), 


二 


return [ 
.. .state.slice(0，threadIndex)， 
newThread, 
.. .state.slice( 
threadIndex + 1, state.1length 
2 
]s 
} else if (action.type === 'DELETE_MESSAGE') { 
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const threadIndex = state.findIndex( 
(七 ) => 七 .messages.find((m) => ( 
m.id === action.id 


const oldThread = state [threadIndex] 


const newThread = { 
..O1dThread ， 
messages: oldThread.messages.filter((m) => (人 
m.id !== action.id 
)), 
}3 


return [ 
..State.slice(0, threadIndex), 
newThread, 
. .State.slice( 
threadIndex + 1, state.1length 
); 
]3 
} else { 
return state; 
} 
} 





通过 集中 处理 该 reducer 并 使 其 仅 处 理 状态 中 的 threads 属性 ， 我 们 可 以 稍微 简化 一 下 代码 。 返 
回 函 数 不 再 需要 关心 整个 状态 树 ， 且 我 们 从 此 函数 中 删除 了 一 个 动作 处 理 程序 。 

在 两 个 动作 处 理 程序 之 间 仍 然 有 重复 逻辑 。 值 得 注意 的 是 ， 它 们 的 返回 函数 是 相同 的 。 

事实 上 ， 虽 然 我 们 简化 了 reducer， 让 它 只 和 state.threads 一 起 使 用 ,但 该 reducer 实际 上 处 理 
了 状态 树 的 两 个 层次 : 线程 和 消息 。 我 们 可 以 进一步 将 reducer 的 逻辑 拆 分 成 更 小 的 部 分 ， 并 通过 让 
threadsReducer( ) 函数 将 职责 委托 给 另 一 个 reducer ( messagesReducer() ) 来 共享 代码 。 OO 


下 一 节 将 对 此 进行 探讨 。 现在 , 让 我 们 先 启动 应 用 程序 , 并 验证 到 目前 为 止 的 解决 方案 是 否 可 行 。 
你 可 能 会 问 : 为 什么 不 将 threadsReducer 函数 中 的 第 一 个 参数 重 命名 为 threads ， 
3) 而 是 将 其 命名 为 state? 


确实 ,这样 做 可 以 提高 reducer 函数 的 可 读 性 。 你 不 再 需要 在 工作 时 将 state 实际 上 
是 state.threads 这 件 事情 一 直 记 在 脑子 里 。 


但 是 , 将 Reduxreducer 的 第 一 个 参数 始终 命名 为 state 有 助 于 避免 错误 。 这 将 清楚 
地 提醒 你 ， 该 参数 是 状态 树 的 一 部 分 ， 应 避免 意外 修改 它 。 
归根 结 底 ， 这 是 个 人 喜好 问题 。 
11.8.3” 试 试看 
保存 App. js。 如 果 服 务 器 未 运行 ， 请 启动 它 
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$ npm start 


接着 将 浏览 器 指向 http://1localhost:386609。 从 表面 上 看 ,似乎 一 切 都 没有 发 生 改 变 。 添 加 和 删 
除 消息 可 以 正常 工作 ， 我 们 也 可 以 在 线程 之 间 切 换 。 





11.9 添加 messagesReducer( ) 函数 


我 们 使 用 了 reducer 组 合 的 概念 来 拆 分 状态 管理 ,顶级 reducer( ) 函数 将 两 个 顶级 状态 属性 的 管理 
委托 给 它们 各 自 的 reducer。 

可 以 进一步 使 用 这 个 概念 。 我 们 已 注意 到 threadsReducer( ) 函数 负责 对 线程 和 消息 的 状态 进行 
管理 。 更 重要 的 是 ,我 们 看 到 了 在 两 个 动作 处 理 程序 之 间 可 以 共享 代码 。 

可 以 让 threadsReducer( ) 函数 将 每 个 线程 的 messages 属性 的 管理 委托 给 另 一 个 reducer: 
messagesReducer( )。 完 整 的 reducer 树 见 图 11-12。 
























state.activeThreadId activeThreadIdReducer( ) 


state.threads threadsReducer( ) 


11-12 ”完整 的 reducer 树 


让 我 们 先 修改 threadsReducer( ) 函数 ， 并 预测 这 个 新 消息 reducer 函数 的 逻辑 。 我 们 希望 线程 
reducer 函数 对 消息 的 了 解 尽 可 能 少 。threadsReducer( ) 函数 将 依赖 messagesReducer( ) 函数 来 确定 
如 何 根据 收 到 的 动作 来 更 新 给 定 线程 的 消息 。 


11.9.1 修改 ADD_MESSACE 动 作 处 理 程序 
让 我 们 来 看 如 果 将 所 有 消息 处 理 功 能 委托 给 预期 的 messagesReducer( ) 函数 时 会 发 生 什 么 。 
我 们 将 不 再 声明 newMessage ， 并 希望 messagesReducer( ) 函数 能 够 处 理 这 个 问题 。 


然后 ， 当 我 们 在 为 newThread 指定 messages 属性 时 , 会 将 这 个 数组 的 创建 工作 委托 给 messages- 
Reducer( ) 国 数 : 


thread.messages 
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reduxchat intermediate/src/complete/App-9.js 





function threadsReducer(state，action) { 


if (action.type === 'ADD_MESSAGE') { 
const threadIndex = state.findIndex( 
(t) => 七 .id === action.threadId 


好 


const oldThread = state[threadIndex] ; 


const newThread { 
. .oldThread, 
messages: messagesReducer(oldThread.messages, action), 


] 





我 们 将 oldThread.messages 数组 传递 给 messagesReducer( ) 函数 作为 第 一 个 参数 , action 作为 
第 二 个 参数 。 这 符合 我 们 目前 的 模式 : reducer( ) 函数 将 state.threads 传递 给 threadsReducer() 
冰 数 作为 第 一 个 参数 ， 而 threadsReducer( ) 函数 又 将 thread.messages 传递 给 messagesReducer() 
函数 作为 第 一 个 参数 。 

现在 我 们 知道 ， 在 构建 messagesReducer( ) 函数 时 ， 第 一 个 参数 (state ) 将 是 给 定 线程 的 消息 
数组 。 











整 的 action 对 象 会 沿 着 整个 链条 向 下 传递 

ni 

目前 ， 这 可 能 只 是 一 个 微不足道 的 胜利 。 之 前 内 联 调用 了 concat( ) 方 法 来 创建 一 个 包含 了 新 消 
息 的 新 messages 数组 。 现 在 增加 了 调用 另 一 个 函数 的 复杂 性 以 完成 此 任务 。 

我 们 正在 拆 分 函数 的 职责 ， 这 本 身 就 是 一 项 值得 努力 的 工作 。 此 外 ， 当 我 们 对 DELETE_MESSAGE 
处 理 程序 进行 相同 的 处 理 时 ， 另 一 个 好 处 将 显而易见 。 

在 修改 DELETE_MESSAGE 动作 处 理 程序 之 前 ， 让 我 们 先 从 messagesReducer( ) 函数 开始 ， 以 了 解 
这 些 reducer 是 如 何 协同 工作 的 。 






















































































11.9.2 ”创建 messagesReducer() 函数 
我 们 将 在 App. js 的 threadsReducer() 国 数 下 方 编写 messagesReducer( ) 函数 。 我们 将 从 一 个 动 
作 处 理 程序 (ADD_MESSAGE ) 开始 。 


如 上 所 述 ,threadsReducer( ) 函数 会 传递 nessagesReducer( ) 函数 一 个 线程 的 messages 数组 作 
为 第 一 个 参数 。 这 将 是 messagesReducer( ) 内 部 的 状态 。 


messagesReducer( ) 函数 需要 做 以 下 操作 : 


(1) 创建 新 消息 ; 
(2) 返回 一 个 新 消息 数组 ， 其 中 包括 附加 到 其 末尾 的 新 消息 。 


我 们 将 使 用 与 之 前 在 threadqsReducer( ) 函数 中 的 相同 的 逻辑 来 完成 这 个 任务 : 


redux/chat intermediate/src/complete/App-9.js 






































function messagesReducer(state, action) { 
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if (action.type === 'ADD_MESSAGE') { 
const newMessage = { 
text: action.text, 
timestamp: Date.now(), 
id: uuid.v4(), 
二 
return state.concat(newMessage ) ; 
} else { 
return state; 
} 
} 











messagesReducer( ) 函数 接收 一 个 消息 数组 作为 它 的 第 一 个 参数 state。ADD_MESSAGE 处 理 程序 
使 用 action.text 创建 一 个 新 消息 。 与 之 前 一 样 ， 我 们 使 用 concat( ) 方 法 来 返回 一 个 新 消息 数组 ， 
并 将 新 消息 附加 到 该 数组 中 。 

现在 我 们 已 了 解 了 threadsReducer( ) 函数 如 何 将 ADD_MESSAGE 处 理 程序 委托 给 messagesReducer() 
函数 ， 下 面 来 看 DELETE_MESSAGE 处 理 程序 是 如 何 完成 相同 工作 的 。 












































11.9.3 ”修改 DELETE_MESSAGE 动 作 处 理 程序 


与 ADD_MESSAGE 动作 人 处理 程序 一 样 ， 我 们 希望 threadsReducer( ) 函数 中 的 DELETE_MESSAGE 动 
作 处 理 程序 将 处 理 每 个 线程 的 messages 属性 的 职责 委托 给 messagesReducer( ) 函数 。 
与 直接 调用 filter( ) 卫 数 不 同 ,我 们 可 以 在 newThread 声明 中 调用 messagesReducer( ) 函数 ， 
并 让 它 生 成 messages 属性 ， 如 下 所 示 : 


redux/chat intermediate/src/complete/App-9.js 


} else if (action.type === 'DELETE_MESSAGE') { 
const threadIndex = state.findIndex( 
(七 ) => 七 .messages.find((m) => ( 
m.id === action.id 
) ) 
const oldThread 
const newThread 
..O1dThread ， 
messages: messagesReducer(oldThread.messages, action), 






























































state [threadIndex] ; 
{ 


让 














是 不 是 看 起 来 很 熟悉 ? 通过 这 些 修 改 ， 线 程 reducer 的 DELETE_MESSAGE 处 理 程序 看 起 来 几乎 与 
ADD_MESSAGE 完全 一 样 。 唯 一 的 区 别 是 两 个 处 理 程序 确定 threadIndex 的 方式 。 

仔细 想 想 ,这 是 有 道理 的 ,我 们 处 理 的 动作 是 添加 和 删除 消息 ,这 只 会 影响 单个 线程 上 的 messages 
属性 。 因 为 messages 属性 现在 由 messagesReducer( ) 函数 管理 ,所 以 ADD_MESSAGE 和 DELETE_MESSAGE 
处 理 程序 之 间 的 区 别 会 在 该 函数 中 表示 。 除了 确定 threadIndex 之 外 ， 其余 的 过 程 (创建 具有 更 新 后 
的 messages 属性 的 新 线程 对 象 ) 是 相同 的 。 

可 以 定义 一 个 新 函数 findThreadIndex( ) ， 并 在 其 中 存储 用 来 确定 threadIndex 的 逻辑 。 然 后 ， 
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可 以 将 两 个 动作 处 理 程序 组 合 在 一 起 ， 因 为 它们 的 代码 相同 。 

首先 , 我 们 将 在 threadsReducer() 函数 上 方 编写 findThreadIndex( ) 涵 数 ,此 子 数 会 将 threads 
(或 threadsReducer( ) 函数 中 的 state ) 和 action 作为 参数 。 我 们 把 用 于 查找 受 影 响 线程 的 索引 逻 
辑 复制 到 该 本 数 中 : 

redux/chat_ intermediate/src/complete/App-10.js 























function findThreadIindex(threads, action) { 
switch (action.type) { 
case 'ADD_MESSAGE': { 
return threads .findIndex( 
(t) => t.id === action.threadId 
7 


} 
case 'DELETE_MESSAGE': { 
return threads .findIndex( 
(t) => 七 .messages.find((m) => ( 
m.id === action.id 


) ) 








我 们 决定 在 这 里 使 用 switch 语句 , 而 不 是 if/else 子 名 在 reducer 及 其 辅助 函数 中 使 用 switch 
语句 会 更 易于 阅读 和 管理 。 你 会 在 很 多 Redux 应 用 程序 中 看 到 它 。 随 着 系统 中 动作 的 增加 ， 单 个 reducer 
必须 具有 多 个 动作 处 理 程序 。switch 就 是 为 这 种 用 例 而 构建 的 。 

在 findThreadIndex( ) 函数 中 使 用 switch 的 另 一 个 原因 是 我 们 将 在 重 构 的 threadsReducer() 
函数 中 使 用 switch : 

reduxchat intermediate/src/complete/App-10.js 












































function threadsReducer(state，action) { 
switch (action.type) { 
case 'ADD_MESSAGE ' : 
case 'DELETE_MESSAGE': { 
const threadIndex = findThreadIndex(state, action); 


const oldThread 
const newThread 
.. .oldThread, 
messages: messagesReducer(oldThread.messages, action), 


> 


state[threadIindex]; 
{ 


return [ 
.. .State.slice(0, threadIndex), 
newThread, 
.. .State.slice( 
threadIndex + 1, state.1length 
), 
] ; 
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} 
default: { 
return state; 
} 
} 
} 














在 这 里 使 用 switch 很 好 ， 原 因 如 下 所 示 : 


redux/chat intermediate/src/complete/App-10.js 











switch (action.type) { 
case 'ADD_MESSAGE ' : 
case 'DELETE_MESSAGE': { 





读 起 来 比 if 语句 更 清晰 : 

if (action.type === 'ADD_MESSAGE' || action.ty 
A re 

} 





如 果 我 们 继续 向 系统 引入 更 多 动作 ， 

















UPDATE_MESSAGE ), 那么 这 种 可 读 性 变 差 的 问题 就 会 加 剧 。 使 月 





有 这 些 动作 来 共享 相同 的 代码 块 。 











除了 对 findThreadIndex( ) 函数 的 调用 之 外 , 组 合 后 的 动作 处 理 程序 的 主体 分 别 与 我 们 上 面具 有 





的 主体 相 匹配 。 




















pe === 'DELETE_MESSAGE') { 





它们 只 会 影响 给 定 线 程 的 messages 属性 (比如 
有 switch 语句 , 我 们 可 以 清晰 地 指定 所 


























11.9.4 ”将 DELETE_MESSAGE 动 作 添加 到 messagesReducer( ) 函数 中 


threadsReducer( ) 函数 现在 处 理 ADD_MESSAGE 动作 和 DELETE_MESSAGE 动作 的 方式 完全 相同 。 
当 reducer 接收 到 DELETE_MESSAGE 动作 时 ， 它 将 使 用 消息 列表 和 动作 对 象 来 调用 messagesReducer() 
函数 。 消 息 列 表 对 应 于 一 个 线程 的 messages 属性 ; 动作 对 象 带 有 要 删除 的 消息 的 指令 。 


让 我 们 将 DELETE_MESSAGE 处 理 程序 的 逻辑 添加 到 messagesReducer( ) 函数 中 。 可 以 暂时 保留 








if/else 子 句 ， 也 可 以 更 改 为 switch: 


redux/chat intermediate/src/complete/App-10.js 


















































function messagesReducer(state, action) { 
switch (action.type) { 
case 'ADD_MESSAGE': { 
const newMessage = { 
text: action.text, 
timestamp: Date.now(), 
id: uuid.v4(), 
3} 
return state.concat(newMessage); 
上 
case 'DELETE_MESSAGE': { 


return state.filter(m => m.id !== action.id); 


} 
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default: { 
return State 
} 
} 
} 














记 住 , 这 里 的 state 就 是 消息 数组 。 过 滤 ” 消息 的 逻辑 与 threadsReducer( ) 困 数 中 的 逻辑 相同 。 

目前 已 拆 分 了 路 三 个 reducer 函数 的 管理 状态 逻辑 。 每 个 函数 将 对 状态 树 的 不 同 部 分 进行 管理 。 
reducer 函数 树 是 在 reducer( ) 处 组 合 起 来 的 ，reducer( ) 是 我 们 传递 给 createStore() 的 函数 。 

在 本 章 中 ， 应 用 程序 和 状态 的 复杂 性 都 显著 增加 。 现 在 我 们 看 到 了 如 何 使 用 reducer 组 合 来 管理 
这 种 复杂 性 。 我 们 有 了 一 种 扩展 系统 的 模式 ， 可 以 处 理 更 多 的 操作 和 状态 。 
还 可 以 再 做 一 个 改进 。 虽 然 管理 状态 更 新 的 逻辑 包含 在 reducer 中 ， 但 应 用 程序 的 初始 状态 是 在 
别 的 地 方 (initialState ) 定义 的 。 让 我 们 把 这 个 初始 化 的 部 分 放 在 它们 各 自 的 reducer 中 。 随 着 状 
态 树 的 增长 ， 这 样 做 可 以 更 好 地 扩展 。 另 外 ， 这 也 意味 着 围绕 状态 树 特定 部 分 的 所 有 逻辑 都 会 包含 在 
它 的 reducer 中 。 









































































































































11.10 在 reducer 中 定义 初始 状态 


下 面 声明 initialState 对 象 ， 并 将 其 传递 给 createStore( ) 函数 : 
const store = createStore(Treducer ，initialState ) 


第 二 个 参数 是 不 必要 的 。 让 我 们 修改 这 一 行 ， 以 不 再 传递 initialState : 




















const store = createStore(Treducer ) 

会 发 生 什 么 呢 ? 

redux 库 中 的 createStore( ) 函数 与 上 一 章 中 编写 的 createStore( ) 函数 存在 一 个 关键 区 别 。 在 
store 初始 化 之 后 ， 且 在 它 返 回 之 前 ，createStore( ) 函数 实际 上 会 分 派 一 个 初始 化 动作 。 该 分 派 的 调 
用 如 下 所 示 : 


yA 
// 在 redux 库 的 createStore( ) 函数 中 
dispatch({ type: '@@redux/INIT' }); 

















return { // 返回 store 对 象 
dispatch, 
subscribe, 
getState， 
} 


虽然 初始 化 动作 具有 一 个 type， 但 你 永远 都 不 需要 使 用 它 。 
重要 的 是 ， 因 为 没有 指定 initialState， 所 以 当 createStore() 函数 分 派 初始 化 动作 时 ，state 
的 值 将 是 undefined。state 的 值 是 undefined 的 唯一 时 间 是 在 第 一 次 分 派 时 。 
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因此 ， 当 state 的 值 是 undefined 时 ， 我 们 就 可 以 让 reducer 为 它们 自己 的 状态 树 部 分 指定 初始 
状态 。 
11.10.1 reducer( ) 逊 数 的 初始 状态 

当 createStore( ) 函数 分 派 初始 化 对 象 时 , reducer( ) 函数 将 收 到 一 个 值 为 undefined 的 state。 

在 这 种 情况 下 ， 我 们 希望 将 state 设置 为 空白 对 象 ({} )。 这 使 得 reducer( ) 函数 能 够 将 状态 对 
象 中 每 个 属性 的 初始 化 委托 给 它 的 reducer。 稍 后 我 们 将 在 实践 中 看 到 它 是 怎样 工作 的 。 

可 以 使 用 ES6 的 默认 参数 来 实现 这 一 点 : 


redux/chat intermediate/Src/compjlete/App-11.js 


























function reducer(state = {}, action) { 





当 reducer() 函 数 接收 到 的 state 的 值 是 undefined 时 ， 便 将 state 的 值 设置 为 {}。 


重要 的 是 ， 当 reducer( ) 调 用 它 的 每 个 子 reducer 时 ,每 个 子 reducer 都 会 收 到 一 个 值 为 undefined 
的 state 参数 。 

在 Redux 中 初始 化 reducer 时 ，state 的 值 为 undefined 是 规范 的 方法 。 虽然 可 以 使 用 这 个 特殊 
的 初始 化 action 对 象 的 类 型 ， 但 使 用 ES6 的 默认 参数 要 简单 得 多 ， 因 为 它 仅 依赖 于 值 为 undefined 
的 状态 。 


者 有 关 默 认 参 数 的 更 多 信息 ， 请 参见 附录 B。 



































11.10.2 ”为 activeThreadIdReducer() 函数 添加 初始 状态 


可 以 使 用 默认 参数 来 初始 化 activeThreadIdReducer() 函数 中 的 状态 。 我 们 希望 初始 状态 是 
'1-fca2' ， 这 是 我 们 为 第 一 个 线程 指定 的 id : 


redux/chat intermediate/Src/compjlete/App-11.js 

















function activeThreadIdReducer(state = '1-fca2', action) { 





让 我 们 回顾 一 下 activeThreadIdReducer( ) 函数 的 初始 化 流程 。 

在 createStore( ) 函数 的 末尾 ， 且 刚好 在 该 函数 返回 新 的 store 对 象 之 前 分 派 了 初始 化 动作 ， 然 
后 将 触发 以 下 操作 : 

(1) 使 用 值 为 undefined 的 state 和 初始 化 动作 对 象 来 调用 reducer( ) 函数 ; 

(2) state 默认 被 设置 为 {}; 

(3) reducer( ) 函数 使 用 值 为 undefined 的 state.activeThreadId 来 调用 activeThreadIdReducer() 
函数 ; 

(4) activeThreadIdReducer( ) 函数 会 使 用 其 默认 参数 并 将 state 设置 为 '1-fca2'; 

(5) activeThreadIdReducer( ) 水 数 中 的 else 子 句 将 返回 state ( 值 为 '1-fca2' )。 
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11.10.3 “为 threadsReducer() 函数 添加 初始 状态 
我 们 将 对 threadsReducer( ) 函数 使 用 相同 的 策略 。 它 的 初始 状态 比较 复杂 ， 因 此 我 们 会 将 其 分 
为 多 行 : 


redux/chat intermediate/src/complete/App-11.js 








function threadsReducer(state = [ 

id: '1-fca2', 

title: 'Buzz Aldrin', 

messages: messagesReducer(undefined, {}), 
} 
{ 

id: "2-be91 ' ， 

title: "Michael Collins '， 

messages: messagesReducer(undefined, {}), 
} 


jl tony { 





如 果 没 有 初始 化 已 处 于 状态 中 的 两 个 线程 ,那么 threadsReducer( ) 函数 的 默认 参数 
将 是 []: 
function threadsReducer(state = [], action) { 


Po 
上 


下 面 在 messagesReducer( ) 函数 中 设置 默认 人 参数。 我 们 之 前 使 用 了 一 条 消息 来 初始 化 其 中 一 个 线 
程 ， 但 现在 就 不 再 需要 了 。 
redux/chat intermediate/Src/compjlete/App-11.js 






























































function messagesReducer(state = []，action) { 
我 们 可 以 将 线程 的 初始 状态 中 的 messages 属性 设置 为 [] 。 但 通过 使 用 undqefined 调用 
messagesReducer( ) 函数 ， 我 们 仍 是 将 messages 属性 的 初始 化 职责 委托 给 它 。 
也 可 以 这 样 做 : 
pa 
{ 
id: '2-be91', 


title: 'Michael Collins', 
messages: messagesReducer( 
undefined, { type: '@@redux/INIT' } 


), 
}, 
VE nak 


但 传递 一 个 空白 的 action 对 象 就 足够 了 , 因为 永远 不 需要 关闭 初始 化 action 对 象 的 特殊 type。 
最 后 ， 从 App. js 中 删除 initialState， 因 为 不 再 需要 它 了 。 
让 我 们 测试 一 下 ， 确 保 一 切 正常 。 
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11.10.4” 试 试看 


保存 App.js， 并 确保 服务 需 正 在 运行 ， 然 后 在 浏览 需 中 加 载 http://1localhost:30880。 


正如 预期 ， 一 切 都 和 以 前 一 样 正常 工作 : 可 以 添加 和 删除 消息 ， 并 在 选项 卡 之 间 切 换 。 唯 一 的 区 
别 是 不 再 使 用 状态 来 初始 化 默认 消息 。 


虽然 表面 上 行为 没有 发 生变 化 ， 但 我 们 知道 在 底层 的 代码 已 清晰 很 多 。 






































11.11 使 用 redux 的 combineReducers( ) 了 荫 数 

















我 们 实现 的 通过 组 合 不 同 的 reducer 来 管理 状态 树 的 不 同 部 分 的 模式 在 Redux 中 是 非常 常见 的 。 
事实 上 ，redux 库 包 含 了 一 个 combineReducers( ) 函数 ， 它 可 以 生成 一 个 顶级 的 reducer() 函数 ， 就 
像 我 们 手动 编写 的 那样 。 

可 以 向 combineReducers( ) 函数 传递 一 个 对 象 , 该 对 象 将 指定 状态 对 象 中 的 每 个 属性 应 该 委托 给 
哪个 函数 。 要 了 解 其 工作 原理 ， 下 面 让 我 们 使 用 它 。 

首先 ， 从 redux 库 中 导入 该 函数 : 


redux/chat intermediate/src/complete/App-12.js 






































import { createStore, combineReducers } from 'redux'; 





接着 奉 换 reducer( ) 函数 的 定义 : 


redux/chat intermediate/src/complete/App-12.js 





const reducer = combineReducers({ 
activeThreadld: activeThreadldReducer, 
threads: threadsReducer, 


}); 





























我 们 告诉 combineReducers( ) 函数 状态 对 象 上 具有 activeThreadId 和 threads 两 个 属性 ， 并 将 这 
些 属 性 设置 为 处 理 它们 的 冰 数 。 

combineReducers( ) 表 数 返回 一 个 reducer 函数 ,其 行为 与 我 们 手动 编写 的 组 合 reducer( ) 函数 完 
全 相 同 Le] 

















一 种 常见 的 模式 是 让 reducer 函数 的 名 称 与 它 管理 的 属性 名 称 相 匹配 。 如 果 我 们 将 
activeThreadIdReducer( ) 重 命名 为 activeThreadId()， 并 将 threadsReducer() 
重 命名 为 threads()， 那 么 就 可 以 使 用 ES6 的 简写 符号 来 获得 最 大 的 简洁 性 : 
const reducer = combineReducers({ 
activeThreadId ， 


threads, 


} 3 
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由 于 应 用 程序 完全 被 包含 在 一 个 文件 中 ， 因 此 在 此 处 我 们 将 Reducer 附加 到 所 有 
reducer 函数 的 名 称 后 面 。 当 Redux 应 用 程序 达到 一 定 的 规模 时 , 通常 有 必要 将 reducer 
函数 拆 分 成 它们 自己 的 文件 ， 例 如 reducers.js。 到 那 时 ， 将 Reducer 附加 到 每 个 
函数 的 名 称 后 面 就 没有 必要 了 ， 我 们 可 以 应 用 上 述 的 简写 方式 。 


11.12 下 一 步 


在 通过 引入 线程 为 应 用 程序 及 其 状态 增加 了 复杂 性 之 后 ， 我 们 对 reducer 的 逻辑 进行 了 一 些 重要 
的 重 构 。 起 初 ， 单 个 reducer 函数 管理 了 状态 树 的 许多 不 同 部 分 ， 并 有 重复 的 逻辑 。 通 过 引入 reducer 
组 合 ， 我 们 设法 将 所 有 的 状态 管理 拆 分 成 更 小 的 部 分 。 

现在 的 应 用 程序 很 好 地 隔离 了 职责 。 这 不 仅 让 代码 变 得 更 容易 阅读 ， 也 使 我 们 能 够 扩展 应 用 程序 
的 规模 。 

如 果 想 在 处 理 消 息 的 系统 中 添加 一 个 新 动作 ， 则 不 必 担 心 管理 线程 的 逻辑 问题 。 我 们 将 重用 
threadsReducer( ) 函数 中 与 ADD_MESSAGE 和 DELETE_MESSAGE 处 理 程序 相同 的 代码 路 径 , 并 将 所 有 特 
定 于 该 动作 的 逻辑 写 在 messagesReducer( ) 函数 中 。 

如 果 想 在 系统 中 添加 一 个 全 新 的 状态 〈 比如 通知 
的 函数 。 不 必 太 担心 它 对 现 有 的 代码 造成 影响 。 

我 们 也 有 机 会 来 重 构 React 组 件 。 下 一 章 将 重点 介绍 React 组件 的 组 织 方 法 。 





















































面板 )， 那 么 该 状态 的 管理 将 完全 独立 于 其 自身 
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上 一 章 增加 了 应 用 程序 的 状态 和 视图 层 的 复杂 性 。 为 了 支持 应 用 程序 中 的 线程 ,我 们 将 消息 对 象 
髓 套 在 状态 树 中 的 线程 对 象 里 。 通 过 使 用 reducer 组 合 ， 我 们 能 够 将 更 复杂 的 状态 树 的 管理 拆 分 成 更 
小 的 部 分 。 

我 们 添加 了 一 个 新 的 React 组 件 (ThreadTabs ) 来 支持 线程 模型 ， 它 允许 用 户 在 视图 上 的 线程 之 
间 进 行 切 换 。 我 们 还 增加 了 现 有 组 件 的 复杂 性 。 

目前 ， 我 们 的 应 用 程序 中 有 四 个 React 组 件 。 每 个 React 组 件 都 直接 与 Redux store 交互 。App 组 
件 会 订阅 store 并 使 用 getState( ) 方 法 读 取 状态 ， 并 将 此 状态 作为 props 传递 给 其 子 组 件 。 子 组 件 将 
直接 把 动作 分 派 到 store。 


本 章 将 探索 组 织 React 组 件 的 新 范式 。 可 以 将 React 组 件 分 为 两 类 : 表示 组 件 和 容器 组 件 。 我 们 
将 看 到 它 如 何 将 Redux store 的 作用 限制 在 容器 组 件 上 ， 并 为 我 们 提供 灵活 、 可 重用 的 表示 组 件 。 


















































































































































12.1 表示 组 件 和 容器 组 件 


在 React 中 , 表示 组 件 是 只 泻 染 HTML 的 组 件 , 组 件 的 唯一 函数 是 用 于 表示 的 标记 代码 。 在 Redux 
支持 的 应 用 程序 中 ， 表 示 组 件 不 会 和 Redux store 交互 。 
表示 组 件 接收 容器 组 件 中 的 props。 容 需 组 件 指定 表示 组 件 应 该 泻 染 的 数据 ， 还 指定 行为 。 如 果 
表示 组 件 具有 交互 性 (如 按钮 )， 那 么 它 将 调用 容器 组 件 提 供给 它 的 属性 函数 。 容 器 组 件 是 用 来 将 动 
作 分 派 到 Redux store 的 组 件 ， 它 们 之 间 的 关系 见 图 12-1。 
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图 12-1 表示 组 件 、 容 器 组 件 和 Redux store 之 间 的 关系 
看 一 下 ThreadTabs 组 件 : 


redux/chat intermediate/src/complete/App-12.js 





class ThreadTabs extends React.Component { 
handleClick = (id) => { 
store.dispatch({ 
type: "OPEN_THREAD ' ， 
idi: 二 9 
}); 
}; 


render() { 
const tabs = this.props.tabs.map((tab, index) => ( 
<div 
key={index} 
className={tab.active ? 'active item' : 'item'} 
onClick={() => this.handleClick(tab.id)} 
> 
{tab.title} 
</div> 
入 
return ( 
<div className='ui top attached tabular menu'> 
{tabs} 
</div> 
) 
} 
} 








此 时 ，ThreadTabs 组 件 既 演 染 HTML (文本 字段 输入 )， 又 与 store 通信 。 每 当 点 击 一 个 选项 卡 
时 ， 它 就 会 分 派 一 个 OPEN_THREAD 动作 。 

但 如 果 我 们 想 在 应 用 程序 中 添加 另 一 组 选项 卡 , 该 怎么 办 呢 ?” 这 组 选项 卡 可 能 必须 分 派 男 一 种 类 
型 的 动作 。 因 此 我 们 必须 编写 一 个 完全 不 同 的 组 件 ， 即 使 它 泻 染 的 HTML 是 相同 的 。 
如 果 我 们 改 用 一 个 通用 的 制 表 符 组 件 (比如 Tabs )， 那 么 会 怎样 呢 ? 此 表示 组 件 不 会 指定 用 户 点 
击 选 项 卡 时 需要 执行 的 操作 。 相 反 ， 只 要 我 们 想 在 应 用 程序 中 使 用 此 特殊 标记 ， 便 可 以 将 其 包装 在 容 
需 组 件 中 的 任何 地 方 。 该 容 需 组 件 可 以 指定 要 分 派 到 store 的 动作 。 
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我 们 把 容器 组 件 命 名 为 ThreadTabs。 它 将 完成 与 store 的 所 有 通信 ， 并 让 Tabs 组 件 来 处 理 标 记 。 
将 来 , 如 果 我 们 想 在 其 他 地 方 使 用 选项 卡 ( 例 如, 在 “联系 人 ”视图 中 为 每 组 联系 人 提供 一 个 选项 卡 )， 
那么 可 以 重用 表示 组 件 ， 见 图 12-2。 











Redux 
Store 


OPEN_THRERAD . Soa 
ThreadTabs ContactTabs 


Ee ee 


图 12-2” 拆 分 容器 组 件 和 表示 组 件 


12.2” 拆 分 ThreadTabs 组 件 


首先 将 通过 编写 Tabs 表示 组 件 来 拆 分 ThreadTabs 组 件 。 这 个 组 件 只 负责 泻 染 HTML, 即 水 平 的 
选项 卡 数组 ， 它 还 需要 一 个 onclick 属性 。 表 示 组 件 将 允许 其 容器 组 件 指 定 在 点 击 选 项 卡 时 所 需 的 任 
何 行为 。 

下 面 将 Tabs 组 件 添加 到 App.js 中 ， 并 把 它 写 在 当前 ThreadTab 组 件 的 上 方 。 用 于 HTML 标记 
的 JSX 与 之 前 相同 : 


redux/chat_intermediate/src/complete/App-13.js 


























const Tabs = (props) => ( 
<div className='ui top attached tabular menu > 
{ 
props.tabs.map((tab, index) => ( 
<div 
key={index} 
className={tab.active ? 'active item' : 'item'} 
onClick={() => props.onClick(tab.id)} 
> 
{tab.title} 
</div> 
) ) 
} 
</div> 


2 
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新 的 表示 组 件 的 一 个 独特 之 处 在 于 它 的 声明 方式 。 到 目前 为 止 , 我 们 一 直 使 用 这 样 的 ES6 类 ， 如 
下 所 示 : 


class App extends React.Component { 
LL sas 
} 


以 这 种 方式 声明 的 React 组 件 会 被 封装 在 React 的 组 件 API 中 。 该 声明 为 组 件 提 供 了 所 有 我 们 一 
直 在 使 用 的 React 特定 的 功能 ， 例 如 生命 周期 Hook 和 状态 管理 。 

然而 ， 如 第 5 章 所 述 ，React 还 允许 你 声明 无 状态 的 函数 式 组 件 。 无 状态 函数 式 组 件 ( 如 Tabs ) 
只 是 返回 标记 的 JavaScript 函数 ， 并 不 是 特殊 的 React 对 象 。 

因为 Tabs 组 件 不 需要 React 的 任何 组 件 方法 ， 所 以 它 可 以 是 无 状态 组 件 。 

事实 上 ， 我 们 所 有 的 表示 组 件 都 可 以 是 无 状态 组 件 。 这 加 强 了 它们 演 染 标记 的 单一 职责 ， 且 语法 
更 简洁 。 此 外 ，React 核心 团队 建议 开发 人 员 尽 可 能 去 使 用 无 状态 组 件 。 由 于 这 些 组 件 没 有 使 用 React 
组 件 对 象 的 任何 功能 进行 “修饰 ”， 因 此 React 团队 预计 在 不 久 的 将 来 会 为 无 状态 组 件 引 入 许多 性 能 
优势 。 

可 以 看 到 ， 传 人 无 状态 组 件 的 第 一 个 参数 是 props : 

redux/chat intermediate/src/complete/App-13.js 





























Pe 











const Tabs = (props) => ( 





因为 Tabs 不 是 一 个 React 组 件 对 象 ， 所 以 它 没有 this .props 这 个 特殊 属性 。 相 反 ， 父 组 件 会 将 
props 作为 参数 传递 给 无 状态 组 件 。 因 此 ， 我 们 将 在 所 有 地 方 使 用 props 而 非 this .props 来 访问 这 
个 组 件 的 所 有 属性 。 

S Tabs 组 件 对 map( ) 方 法 的 调用 是 内 联 的 ， 且 谱 套 在 该 函数 返回 的 div 标签 内 。 

也 可 以 将 此 逻辑 置 于 函数 的 return 语句 之 上 ， 就 像 我 们 在 ThreadTabs 组 件 的 
render() 函数 中 所 做 的 那样 。 这 只 是 风格 偏好 的 问题 。 

表示 组 件 已 准备 好 了 ， 让 我 们 看 看 使 用 它 的 容器 组 件 是 什么 样子 的 。 修 改 当 前 的 ThreadTabs 
组 件 : 


redux/chat intermediate/src/complete/App-13.js 














| 

















class ThreadTabs extends React.Component { 
render() { 
return ( 
<Tabs 
tabs={this .props .tabs} 
onClick={(id) => (人 
store.dispatch({ 
type: 'OPEN_THREAD', 
id: id, 
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入 
} 
} 























我 们 虽然 没有 使 用 React 的 任何 组 件 方法 ,但 仍 使 用 ES6 类 组 件 ， 而 不 是 声明 无 状态 组 件 。 我 们 
马上 就 会 知道 为 什么 。 

容器 组 件 指定 了 表示 组 件 的 props 和 行为 。 我 们 把 tabs 属性 设置 为 App 组 件 指 定 的 this.props. 
tabs; 接 下 来 把 onclick 属性 设置 为 一 个 调用 store.dispatch( ) 的 函数 。 我 们 希望 Tabs 组 件 将 被 点 
击 的 选项 卡 的 id 传递 给 这 个 函数 。 
如 果 我 们 现在 测试 应 用 程序 ， 那 么 会 很 高 兴 注 意 到 新 的 容器 组 件 /表示 组 件 组 合 在 正常 工作 。 

然而 ，ThreadTabs 组 件 中 有 一 件 奇怪 的 事情 : 它 直 接 用 dispatch( ) 方 法 将 操作 发 送 到 store， 但 
目前 它 又 通过 props (通过 this.props.tabs ) 间接 地 从 store 读 取 数据 。App 组 件 是 唯一 从 store 中 
读 取 数据 的 组 件 , 且 这 些 数据 会 向 下 流 到 ThreadTabs 组 件 中 。 但 如 果 ThreadTabs 组 件 直接 将 动作 分 
派 到 store， 那 么 间接 从 store 中 读 取 数据 还 有 必要 吗 ? 

因此 ， 可 以 让 所 有 的 容器 组 件 负责 向 store 发 送 动作 和 读 取 数据 。 

为 了 让 ThreadTabs 组 件 实现 这 一 点 , 我 们 可 以 直接 在 componentDidMount 函数 中 订阅 store, 就 
像 在 App 组 件 中 那样 : 


redux/chat intermediate/src/complete/App-14.js 
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class ThreadTabs extends React.Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate( )); 


} 




















然后 在 render( ) 函数 内 部 , 可 以 使 用 getstate( ) 方 法 直接 从 store 中 读 取 state.threads。 我 们 
将 在 这 里 使 用 与 App 组 件 中 相同 的 逻辑 来 生成 选项 卡 : 


redux/chat intermediate/src/complete/App-14.js 








render() { 
const state = store.getState() ; 


const tabs = state.threads.map(t => ( 

{ 
title: t.title, 
active: t.id === state.activeThreadld, 
id: 七 .id， 

} 

3 











下 面 我 们 不 再 需要 从 this .props 中 读 取 数据 ,而 是 将 创建 好 的 tabs 变量 传递 给 Tabs 组 件 : 


redux/chat_intermediate/src/complete/App-14.js 





return ( 
<Tabs 
tabs={tabs} 
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onClick={(id) => ( 
store.dispatch({ 
type: 'OPEN_THREAD', 
id: id 


FE 

















Tabs 组 件 纯 粹 用 于 表示 ， 没 有 指定 自己 的 行为 ， 可 以 放 在 应 用 程序 中 的 任何 位 置 。 


ThreadTabs 组 件 是 一 个 容器 组 件 ， 它 不 演 染 任何 标记 。 相 反 ， 它 负责 与 store 交互 并 指定 要 演 染 
的 表示 组 件 。 该 容器 组 件 是 store 到 表示 组 件 的 连接 器 。 


完整 的 表示 组 件 和 容器 组 件 的 组 合 ， 如 下 所 示 : 
redux/chat intermediate/src/complete/App-14.js 


























const Tabs = (props) => ( 
<div className='ui top attached tabular menu'> 
{ 
props.tabs.map((tab, index) => ( 
<div 
key={index} 
className={tab.active ? 'active item' : 'item'} 
onClick={() => props.onClick(tab.id)} 
> 
{tab.title} 
</div> 
) ) 
} 
</div> 


); 


class ThreadTabs extends React.Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate( )); 


} 


render() { 
const state = store.getSstate(); 


const tabs = state.threads.map(t => ( 


{ 
title: t.title, 
active: t.id === state.activeThreadld, 
Ld ctld;y 
} 
7 
return ( 
<Tabs 


tabs={tabs} 
onClick={(id) => ( 
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store.dispatch({ 
type: 'OPEN_THREAD', 
id: id, 





除了 能 够 在 应 用 程序 的 其 他 地 方 重用 表示 组 件 外 ， 这 个 范式 还 为 我 们 带 来 了 另 一 个 明显 的 好 处 : 
我 们 将 用 于 表示 的 视图 代码 完全 从 状态 及 其 动作 中 解 耦 出 来 .我 们 将 看 到 ,这 种 方法 将 所 有 关于 Redux 
和 store 的 作用 范围 隔离 到 应 用 程序 的 容器 组 件 中 。 这 可 以 最 小 化 未 来 的 转换 成 本 。 如 果 想 要 将 应 用 
程序 迁移 到 另 一 个 状态 管理 范式 ， 则 无 须 触 碰 应 用 程序 的 任何 表示 组 件 。 
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让 我 们 继续 使 用 新 的 设计 模式 进行 重 构 。 

Thread 组 件 将 线程 作为 一 个 属性 接收 ， 并 包含 了 用 于 泻 染 该 线程 内 部 的 消息 以 及 MessageInput 
组 件 的 所 有 标记 。 如 果 点 击 消息 ， 该 组 件 将 向 store 发 送 一 个 DELETE_MESSAGE 动作 。 

演 染 线程 视图 的 部 分 涉及 泻 染 它 的 消息 视图 。 可 以 为 线程 和 消息 使 用 单独 的 容器 和 表示 组 件 。 在 
此 设置 中 ,线程 的 表示 组 件 将 泻 染 消 息 的 容器 组 件 。 

因为 我 们 不 期 望 在 线程 之 外 演 染 消息 列表 ,所 以 让 线程 的 容器 组 件 同 时 管理 消息 的 表示 组 件 是 合 
理 的 。 


可 以 有 一 个 容器 组 件 : ThreadDisplay。 该 容器 组 件 将 泻 染 Thread 表示 组 件 ( 见 图 12-3 )。 


Redux 
ee -i 
store 


图 12-3 ”ThreadDisplay 容器 组 件 泻 染 Thread 表示 组 件 
对 于 消息 列表 ， 可 以 让 Thread 组 件 泻 染 另 一 个 MessageList 表示 组 件 。 


但 MessageInput 组 件 要 怎么 处 理 呢 ? 与 之 前 版 本 的 ThreadTabs 组 件 一 样 ， 该 组 件 包含 两 个 职 
责 。 该 组 件 演 染 标记 , 即 带 有 提交 按钮 的 单个 文本 字段 。 此外, 它 还 指定 提交 表单 时 应 该 发 生 的 行为 。 
因此 ， 可 以 有 一 个 通用 的 表示 组 件 : TextFieldsubmit。 该 组 件 只 演 染 标记 ， 并 允许 其 父 级 来 指 
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定 提交 文本 字段 时 所 发 生 的 情况 。ThreadDisplay 组 件 可 以 通过 Thead 组 件 来 控制 这 个 文本 字段 的 
行为 。 


通过 这 种 设计 ， 我 们 将 有 一 个 容器 组 件 用 于 顶部 线程 。Thread 表示 组 件 将 是 两 个 子 表示 组 件 
MessageList 和 TextFieldSubmit 的 组 合 ( 见 图 12-4 )。 


store 


Thread 














Messagelist TextFieldSubmitr 


图 12-4 ”Thread 表示 组 件 是 两 个 子 表示 组 件 MessageList 和 TextFieldSubmit 的 组 合 











为 了 避免 混淆 ， 让 我 们 先 把 当前 的 Thread 组 件 重 命名 为 ThreadDisplay : 
// 重 命名 Thread 组 件 


class ThreadDisplay extends React.Component { 
7 
氢 








我 们 将 从 底部 开始 ， 先 编写 表示 组 件 TextFieldSubmit 和 MessageList ， 接 着 会 一 直 进 行 到 
Thread 组 件 ， 然 后 是 ThreadDisplay 组 件 。 


1. TextFieldSubmit 组 件 

与 ThreadTabs 组 件 一 样 , MessageInput 组 件 也 起 着 两 种 不 同 的 作用 : 该 组 件 既 演 染 输入 字段 的 
HIML， 又 指定 了 提交 该 输入 字段 的 行为 (分 派 ADD_MESSAGE 动作 )。 

如 果 我 们 从 MessageInput 组 件 中 删除 分 派 调 用 ， 那 么 它 将 只 剩 下 一 个 泻 染 标 记 的 通用 组 件 ， 带 
有 相 邻 提交 按钮 的 文本 字段 。 该 表示 组 件 将 允许 其 容器 组 件 在 提交 输入 字段 时 指定 所 需 的 任何 行为 。 


让 我 们 将 MessageInput 组 件 重 命名 为 TextFieldSubmit， 以 使 其 更 加 通用 。 其 他 唯一 需要 做 的 
更 改 是 在 handleSubmit( ) 函 数 中 。 我 们 将 让 TextFieldsubmit 组 件 接收 一 个 onSubmit 属性 ， 它 将 
调用 这 个 属性 函数 ， 而 不 是 直接 分 派 到 store: 


redux/chat intermediate/Src/complete/App-14.js 






































class TextFieldSubmit extends React .Component { 
state = { 
Value: '"" 


中 
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onChange = (e) => { 
this .setState({ 
value: e.target.value, 
}) 
} 


handleSubmit = () => { 
this.props.onSubmit(this.state.value); 
this .setState({ 
Value : 
} 
}; 


’ 





2. MessageList 组 件 





可 





MessageList 组 件 将 接收 两 个 属性 : messages 和 onClick。 和 以 前 一 样 ， 这 个 表示 组 件 不 会 指定 
任何 行为 。 作 为 一 个 无 状态 组 件 ， 它 只 泻 染 HTML。 














在 App.js 中 的 TextFieldSubm 计 组 件 下 方 和 ThreadDisplay 组 件 的 上 方 编写 MessageList 组 件 : 
redux/chat intermediate/src/complete/App-14.js 





const MessageList = (props) => ( 
<div className='ui comments '> 


{ 
props .messages .map((m，index) => ( 
《<div 
className='comment" 
key={index} 
onClick={() => props.onClick(m.id)} 
> 
<div className= ' 七 ext > 
{m.text} 
<span className='metadata'>@{m.timestamp}</span> 
</div> 
</div> 
) ) 
} 


</div> 
) 




















在 props.messages 上 执行 map( ) 方 法 的 逻辑 与 之 前 在 Thread 组 件 中 的 逻辑 相同 。 我 们 使 用 内 联 
方式 来 执行 它 ， 并 将 其 租 套 在 负责 样式 的 div 标签 内 。 其 中 有 三 个 变化 ， 如 下 所 示 : 














e@ 我 们 通过 props .messages 而 不 是 this .props.threads 来 执行 映射 ; 


e@ _ onclick 属性 现在 被 设置 为 props.onClick ; 
e@ 为 了 简洁 ， 我 们 使 用 了 变量 m 来 代替 message。 














@ 你 可 以 通过 添加 另 一 个 组 件 Message 来 进一步 拆 分 这 个 表示 组 件 。 但 由 于 每 条 消息 
的 标记 仍 非常 简单 ， 因 此 我 们 暂时 不 打算 这 样 做 。 
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3. Thread 组 件 

我 们 有 两 个 与 显示 线程 相关 的 表示 组 件 。 一 个 是 MessageList 组 件 , 用 于 泻 染 该 线程 中 的 所 有 消 
息 。 男 一 个 是 TextFieldSubmit 组 件 ， 这 是 Py 目 ， 用 于 向 该 线程 提交 新 消息 。 
我 们 将 在 另 一 个 表示 组 件 Thread 下 集成 这 两 个 表示 组 件 。ThreadDisplay 容 需 组 件 将 泻 染 
Thread 组 件 ， 而 Thread 组 件 将 依次 泻 染 MessageList 和 TextFieldSubmit 组 件 

我 们 期 望 ThreadDisplay 组 件 会 给 Thread 组件 传 递 三 个 属性 。 

e@ thread: 线程 本 身 。 

@ onMessageClick: 点 击 消息 的 处 理 程序 。 

e@ onMessageSubmit: 提交 文本 字段 的 处 理 程序 。 


我 们 将 让 Thread 组 件 传递 适当 的 属性 到 它 的 每 个 子 表示 组 件 : 
redux/chat intermediate/src/complete/App-14.js 
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const Thread = (props) => ( 
<div className='ui center aligned basic segment'> 
<MessageList 
messages={props .thread.messages} 
onClick={props .onMessageClick} 
/> 
<TextFieldSubmit 
onSubmit={props.onMessageSubmit} 
/> 
</div> 


2 








4. ThreadDisplay 组 件 


ThreadDisplay 组 件 (以 前 叫 作 Thread ) 是 容 右 组 件 。 与 之 前 的 两 个 容 右 组 件 一 样 , 它 也 将 订阅 
store。 它 负责 从 store 中 读 取 数据 并 向 其 分 派 动 作 。 


首先 在 componentDidMount 困 数 中 订阅 store: 




















redux/chat_ intermediate/src/complete/App-14.js 





class ThreadDisplay extends React.Component { 
componentDidMount() { 


store.subscribe(() => this.forceUpdate()); 


} 








ThreadDisplay 组 件 将 直接 从 store 中 读 取 活动 线程 。 然后 该 容器 组 件 将 传人 thread 和 onMessageClick 
属性 来 演 染 Thread 组 件 。 


在 render( ) 函 数 内 部 ,我们 将 使 用 与 App 组 件 中 的 相同 的 逻辑 来 获取 活动 线程 : 


redux/chat intermediate/src/complete/App-14.js 











而 








render() { 
const state = store.getState() ; 
const activeThreadld = state.activeThreadld; 
const activeThread = state.threads .find( 
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t => t.id === activeThreadld 
)e 








我 们 返回 Thread 组 件 , 并 将 thread 属性 传递 给 它 ， 
Submit 行为 : 


redux/chat intermediate/src/complete/App-14.js 


时 指定 它 的 onMessageClick 和 onMessage- 


Hl 











return ( 
<Thread 
thread={activeThread} 
onMessageClick={(id) => ( 
store.dispatch({ 
type: 'DELETE_MESSAGE', 
id: id 
}) 


/ 


)} 
onMessageSubmit={(text) => ( 


store.dispatch({ 
type: "ADD_MESSAGE ' ， 
text: text, 
threadld: activeThreadId， 
}) 





完整 的 ThreadDisplay 容 需 组 件 如 下 所 示 : 


redux/chat intermediate/src/complete/App-14.js 





class ThreadDisplay extends React .Component { 
componentDidMount() { 
store.subscribe(() => this.forceUpdate()); 


} 


render() { 
const state = store.getState(); 
const activeThreadld = state.activeThreadld; 
const activeThread = state.threads .find( 
t => 七 .id === activeThreadId 


); 


return ( 
<Thread 
thread={activeThread} 
onMessageClick={(id) => ( 
store.dispatch({ 
type: 'DELETE_MESSAGE', 
id: id 
}) 


中 
onMessageSubmit={(text) => ( 


store.dispatch({ 
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type: "ADD_MESSAGCE ' ， 
text: text, 
threadld: activeThreadId， 











我 们 已 将 所 有 的 视图 组 件 拆 分 成 容器 组 件 和 表示 组 件 。 两 个 容器 组 件 直接 与 store 通信 ， 并 执行 
读 取 操作 (getState() ) 和 发 送 操作 (dispatch() )。 
正 因为 如 此 ,我 们 根本 不 需要 让 App 组 件 和 store 对 话 。App 组 件 的 render( ) 函数 现在 从 store 读 
取 数 据 ， 然 后 将 props 发 送 给 它 的 子 组 件 。 现 在 App 组 件 的 子 组 件 正 在 和 store 通信 ， 因 此 它 不 青 需 
要 给 子 组 件 提供 任何 props。 


























下 















































12.4 从 App 组 件 中 移 除 store 


因为 容器 组 件 现 在 是 自己 与 store 交互 ， 所 以 我 们 可 以 从 App 组 件 中 移 除 它 和 store 的 所 有 通信 。 
和 实 上 ， 可 以 把 App 变 成 一 个 无 状态 的 组 件 : 
redux/chat intermediate/Src/complete/App-1S.js 

















山中 





const App = () => ( 
<div className='ui segment'> 
{/* 下 面 将 Thread 组 件 改 为 ThreadDisplay 组 件 */} 
<ThreadTabs /> 
<ThreadDisplay /> 
</div> 

















这 与 我 们 之 前 的 一 些 应 用 程序 的 顶级 组 件 形成 了 鲜明 的 对 比 ， 不 是 吗 ? 

因为 我 们 组 合 了 新 的 容器 和 表示 组 件 范式 以 及 一 个 Redux 状态 管理 器 , 所 以 此 应 用 程序 的 顶级 组 
件 只 需要 指定 在 页 面 上 包含 哪些 容器 组 件 。 读 写 状态 的 所 有 职责 都 被 下 放 到 每 个 容器 组 件 中 。 

因为 没有 直接 从 叶子 组 件 分 派 动 作 ， 所 以 我 们 将 Redux store 的 所 有 作用 范围 隔离 到 容器 组 件 中 。 
可 以 在 应 用 程序 的 其 他 上 下 文中 自由 地 重用 表示 组 件 。 此 外 ,如 果 想 要 将 状态 管理 范式 从 Redux 切换 
到 其 他 方案 ,那么 只 需 修改 容器 组 件 即 可 。 

我 们 的 容器 组 件 看 起 来 都 非常 相似 。 它 们 订阅 store， 然 后 将 状态 和 动作 映射 到 表示 组 件 上 的 props 
中 。 下 一 节 将 探索 一 种 减少 编写 容器 组 件 模 板 代码 的 方法 。 

但 现在 ， 让 我 们 暂停 一 下 ， 以 验证 一 切 是 否 仍 能 像 以 前 一 样 正常 工作 。 

试 试看 

保存 App. js。 虽 然 我 们 对 React 组 件 进行 了 一 些 重大 的 架构 更 改 , 但 打开 http://localhost:3000 
查看 应 用 程序 时 ， 一 切 都 和 以 前 一 样 能 正常 工作 。 
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12.5 ”使 用 react-redux 库 创建 容器 组 件 


我 们 的 两 个 容器 组 件 (ThreadTabs 和 ThreadDisplay ) 具有 相似 的 行为 。 

e@ 它们 在 componentDidMount 函数 中 订阅 了 store。 

e@ 它们 可 能 有 一 些 逻 辑 来 将 数据 从 状态 转换 为 适合 作为 表示 组 件 ( 如 ThreadTabs 组 件 中 的 tabs ) 

属性 的 格式 。 

e@ 它们 将 表示 组 件 上 的 动作 ( 如 点 击 事 件 ) 映射 为 分 派 到 store 的 函数 。 

因为 容器 组 件 依 赖 于 表示 组 件 来 演 染 标记 ， 所 以 它们 只 包含 store 和 表示 组 件 之 间 的 “黏合 ” 
代码 。 

在 编写 使 用 Redux store 的 React 应 用 程序 时 ，react-redux (一 个 流行 的 库 ) 为 我 们 提供 了 许多 
便利 。 最 主要 的 便利 是 它 的 connect( ) 函数 。 

react-redux 库 中 的 connect( ) 函数 用 于 生成 容器 组 件 。 对 于 每 个 表示 组 件 ， 可 以 编写 男 数 来 指 
定 状态 应 该 如 何 映射 到 属性 ， 以 及 事件 应 该 如 何 映射 到 分 派 操 作 。 

让 我 们 来 实践 一 下 。 
12.5.1 Provider 组 件 


在 使 用 connect( ) 函数 生成 容器 组 件 之 前 ， 我 们 需要 对 应 用 程序 进行 一 些 补充 。 
现在 容器 直接 引用 了 store 变量 。 这 之 所 以 有 效 ， 是 因为 我 们 在 与 组 件 相 同 的 文件 中 声明 了 此 


三 
变量 。 

















































































































为 了 使 connect() 函 数 能 够 生成 容器 组 件 ， 需 要 一 些 规 范 的 容器 机 制 来 访问 Redux store。 该 函数 
不 能 依赖 于 在 同一 个 文件 中 声明 并 可 用 的 store 变量 。 

为 了 解决 这 个 问题 ，react_redux 库 提供 了 一 个 特殊 的 Provider 组 件 。 可 以 将 顶级 组 件 封装 在 
Provider 组 件 中 。Provider 组 件 将 通过 React 的 上 下 文 特 性 使 所 有 组 件 都 可 以 访问 该 store。 

当 我 们 使 用 connect( ) 函数 来 生成 容器 组 件 时 ， 这 些 容器 组 件 会 假定 store 可 以 通过 上 下 文 来 
使 用 。 












































上 下 文 是 一 个 React 特性， 我 们 可 以 使 用 它 将 某 些 数据 提供 给 所 有 React 组件。 第 5 
章 已 讨论 了 上 下 文 。 

使 用 props 时 ， 数 据 被 显 式 传递 到 组 件 层次 结构 中 。 父 组 件 必须 指定 哪些 数据 可 供 
其 子 组 件 使 用 。 

上 正文 允许 你 将 数据 隐 式 提 供给 树 中 的 所 有 组 件 。 任 何 组 件 都 可 以 “选择 ”接收 上 
下 文 ， 而 该 组 件 的 父 组 件 不 需要 做 任何 事情 。 

虽然 我 们 在 书 中 的 其 他 地 方 讨论 了 上 下 文 , 但 在 React 中 它 是 一 个 很 少 用 到 的 特性 。 
React 核心 团队 不 鼓励 使 用 它 ， 除 非 在 一 些 特殊 情况 下 。 
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12.5.2 ”将 App 组 件 包 装 在 Provider 中 
在 package. json 中 ， 我 们 已 包含 了 react-redux 库 : 


"react-redux": "5.0.4", 
为 了 使 用 Provider 组 件 ， 首 先 需要 将 其 包含 在 App. js 的 顶部 : 


redux/chat intermediate/Src/complete/App-1S.js 




















import { Provider } from 'react-redux'; 





为 了 使 生成 的 容器 组 件 可 通过 上 下 文 访问 store， 我 们 需要 将 App 组 件 包 装 在 Provider 组 件 中 。 

在 App.js 的 底部 ,我 们 将 声明 一 个 新 组 件 :wrappedApp 。WrappedApp 组 件 将 返回 包装 在 Provider 
组 件 中 的 App 组 件 。 我 们 将 从 该 文件 中 导出 wrappedApp 组 件 : 

redux/chat intermediate/src/complete/App-1$.js 








const WrappedApp = () => (人 
<Provider store={store}> 
<ApP /> 
</Provider> 


好 


export default WrappedApp; 




















Provider 组 件 期 望 接 收 一 个 store 属性 。 该 属性 现在 在 上 下 文 变量 ( store ) 下 的 组 件 层 次 结构 
中 的 任何 地 方 都 可 用 。 


全 通常 也 可 以 将 Provider 导入 index.js， 并 在 其 中 包装 App 组 件 。 


12.5.3 ”使 用 conneet( ) 函数 生成 ThreadTabs 组 件 

ThreadTabs 组 件 将 Tabs 表示 组 件 与 Redux store 连接 起 来 。 它 是 通过 以 下 操作 来 实现 这 一 点 的 : 

e@ 在 componentDidMount 函数 中 订阅 store; 

e@ 根据 store 的 threads 属性 创建 一 个 tabs 变量 ， 并 将 其 用 于 Tabs 组 件 的 tabs 属性 ; 

e@ 将 Tabs 组 件 上 的 onclick 属性 设置 为 分 派 OPEN_THREAD 动作 的 函数 。 

可 以 使 用 connect( ) 函数 来 生成 这 个 组 件 。 

我 们 需要 给 connect( ) 函数 传递 两 个 参数 : 第 一 个 是 将 state 映射 到 Tabs 组 件 的 props 的 函数 ; 
第 二 个 是 将 、 该 组 件 的 props 的 函数 。 

我 们 将 通过 实现 它 来 了 解 其 的 工作 原理 。 

1. 将 state 映射 到 props 
首先 ， 从 react-redux 库 导 入 connect() 函数 : 
























































IN 
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redux/chat intermediate/src/complete/App-16.js 





import { Provider, connect } from 'react-redux'; 

















目前 ， 我 们 通过 创建 tabs 变量 在 ThreadTabs 组 件 的 render( ) 函数 中 为 Tabs 组 件 执行 state 














和 props 之 间 的 “映射 ”。 











我 们 将 编写 一 个 函数 ，connect( ) 将 使 用 该 函数 来 执行 相同 的 操作 ， 该 函数 叫 作 mapStateTo- 





TabsProps( )。 











在 App.js 中 的 ThreadTabs 组 件 上 方 声明 该 函数 。 它 希望 接收 一 个 state 作为 参数 : 


redux/chat intermediate/src/complete/App-16.js 





每 当 state 更 改 时 ， 都 会 调用 此 函数 来 确定 如 何 将 新 的 state 映射 到 Tabs 组 件 的 props。 





const mapStateToTabsProps = (state) => { 

















可 以 根据 state.threads 来 复制 粘贴 ThreadTabs 组 件 中 的 逻辑 以 生成 tabs 变量 : 


redux/chat intermediate/src/complete/App-16.js 





const tabs = state.threads.map(t => ( 
{ 
title: t.title, 
active: t.id === State.activeThreadId ， 
id: 七 .id， 
} 
)); 








state 转 props 映射 函数 需要 返回 一 个 对 象 。 这 个 对 象 上 的 属性 是 Tabs 组 件 的 属性 名 。 因 为 该 属 
































性 叫 作 tabs ， 且 我 们 为 其 设置 的 变量 名 也 是 tabs ， 所 以 可 以 使 用 ES6 对 象 的 简写 形式 : 


redux/chat intermediate/src/complete/App-16.js 











return { 
tabs, 
上 
上 





完整 的 mapStateToTabsProps( ) 函数 如 下 所 示 : 


redux/chat intermediate/src/complete/App-16.js 





const mapStateToTabsProps = (state) => { 
const tabs = state.threads.map(t => ( 
{ 
title: t.title, 
active: t.id === state.activeThreadld, 
id: 七 .id， 
)); 


return { 
tabs, 
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用 
上 














这 个 函数 封装 了 以 前 在 ThreadTabs 组 件 中 的 逻辑 ， 描 述 了 状态 如 何 映 射 到 Tabs 组 件 的 tabs 属 
性 。 现 在 ， 我们 必须 对 onclick 属性 执行 相同 的 操作 ， 它 将 映射 到 一 个 分 派 调用 。 

2. 将 分 派 操 作 映 射 到 props 

我 们 将 在 mapStateToTabsProps( ) 函数 下 方 声明 这 个 函数 ， 并 将 其 命名 为 mapDispatchToTabsProps(): 


redux/chat intermediate/src/complete/App-16.js 


























const mapDispatchToTabsProps = (dispatch) => ( 





我 们 将 把 这 个 函数 作为 第 二 个 参数 传递 给 connect( ) 。 它 会 在 安装 时 被 调用 ， 并 将 dispatch 作 
为 参数 传人 。 

与 mapStateToTabsProps( ) 极 数 一 样 ， 我 们 将 返回 一 个 对 象 , 该 对 象 将 把 onclick 属性 映射 到 将 
要 执行 分 派 操作 的 函数 。 这 个 函数 与 ThreadTabs 组 件 之 前 指定 的 函数 功能 相同 : 


redux/chat intermediate/src/complete/App-16.js 











const mapDispatchToTabsProps = (dispatch) => ( 


onClick: (id) => ( 
dispatch({ 
type: 'OPEN_THREAD', 
id: id 














eal 





4 


现在 有 了 两 个 函数 ， 一 个 将 store 的 状态 映射 到 Tabs 组 件 上 的 tabs 属性 ， 另 一 个 将 onclick 
性 映射 到 一 个 分 派 OPEN_THREAD 动作 的 函数 。 


现在 可 以 使 用 connect( ) 函数 来 替换 ThreadTabs 组 件 。 删 除 当 前 在 App. js 中 的 整个 ThreadTabs 
组 件 。 

0 state 映射 到 props 的 函数 ， 第 二 个 参数 是 将 props 映射 到 
dispatch 子 数 的 函数 。connect( ) 返 函数 ,我们 将 使 用 表示 组 件 来 立即 调用 该 孔 数 ， 并 希望 用 
容 需 组 件 来 “连接 ”store: 


// connect( ) 阿 数 签名 
// (注意 这 只 是 其 中 一 部 分 ， 稍 后 我 们 将 看 到 完整 的 签名 ) 
connect( 
mapStateToProps(state ) ， 
mapDispatchToProps(dispatch), 
) (PresentationalComponent) 


让 我 们 使 用 connect( ) 函数 来 创建 ThreadTabs 组 件 : 
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redux/chat intermediate/src/complete/App-16.js 





const ThreadTabs = connect( 
mapStateToTabsProps ， 
mapDispatchToTabsProps 

) (Tabs); 














从 表面 上 看 , ThreadTabs 可 能 不 太 像 组 件 , 但 它 是 React 容器 组 件 , 与 之 前 使 用 的 组 件 并 无 太 大 
不 同 。 
12.5.4 ”使 用 connect() 函数 生成 ThreadDisplay 组 件 

我 们 将 使 用 connect( ) 函数 生成 的 下 一 个 组 件 : ThreadDisplay。 

该 容器 组 件 指定 了 Thread 组 件 的 三 个 属性 : 


© thread 



































nl 


@ onMessageClick 


® onMessageSubmit 

state 映射 到 props 

我 们 将 调用 这 个 mapStateToThreadProps() 映 射 函 数 。 它 映射 了 一 个 属 1 
e@ thread: 映射 到 处 于 状态 中 的 活动 线程 
dispatch 映射 到 props 

我 们 称 这 个 映射 函数 为 mapDispatchToThreadProps()。 它 映射 了 两 个 属性 。 


@ onMessageClick: 映射 到 分 派 DELETE_MESSAGE 动作 的 函数 。 
@ onMessageSubmit: 映射 到 分 派 ADD_MESSAGE 动作 的 函数 。 

















al 
: 




















O 





1. mapStateToThreadProps() 函数 
我 们 将 在 App. js 的 ThreadDisplay 组 件 上 方 编写 state 转 props 的 黏合 困 数 。 


mapStateToThreadProps( ) 国 数 接收 一 个 state 人 参数。 我们 让 它 返 回 一 个 对 象 ,该 对 象 将 thread 
属性 映射 到 处 于 状态 中 的 活动 线程 : 


redux/chat intermediate/src/complete/App-16.js 





























const mapStateToThreadProps = (state) => (人 
{ 
thread: state.threads.find( 
t => t.id === state.activeThreadld 
) 
) 

















这 与 ThreadDisplay 组 件 中 用 于 设置 Thread 组 件 的 thread 属性 的 逻辑 相同 。 
2. mapDispatchToThreadProps() 函数 
在 mapStateToThreadProps() 函数 下 方 ， 我 们 将 编写 dispatch 转 props 的 黏合 函数 。 
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我 们 编写 的 第 一 个 dispatch 属性 是 onMessageClick 。 该 函数 接收 一 个 id 参数 并 分 派 一 个 
DELETE_MESSAGE 动作 。 同 样 ， 这 个 逻辑 与 ThreadDisplay 组 件 中 的 逻辑 相 匹配 : 


redux/chat intermediate/src/complete/App-16.js 











const mapDispatchToThreadProps = (dispatch) => ( 


{ 
onMessageClick: (id) => ( 
dispatch({ 
type: 'DELETE_MESSAGE', 
id: id， 
}) 


), 





接 下 来 需要 为 onMessageSubmit 定义 dispatch 国 数 。 


如 果 你 还 记得 ， 在 ThreadDisplay 组 件 内 部 ， 这 个 函数 分 派 了 一 个 ADD_MESSAGE 动作 ， 如 下 
所 示 : 


store.dispatch({ 
type: "ADD_MESSACE ' ， 
text: text, 
threadld: activeThreadId， 
}) 





connect( ) 函数 不 会 将 状态 传递 给 dispatch 转 props 的 函数 。 那 么 如 何 获得 活动 线程 的 id 呢 ? 
我 们 可 能 会 进行 一 些 下 面 的 尝试 : 


store.dispatch({ 
type: 'ADD_MESSAGE', 
text: text, 
// 直接 从 store 中 读 取 “activeThreadId” 
threadId: store.getState().activeThreadId, 
}) 


对 应 用 程序 来 说 ， 这 样 做 能 很 好 地 工作 。 因 为 store 是 在 这 个 文件 中 定义 的 ， 所 以 我 们 可 以 直接 
从 它 那里 读 取 。 

但 是 ， 传 递 给 connect( ) 的 映射 函数 最 好 不 要 直接 访问 store。 

为 什么 呢 ? 

因为 我 们 将 使 用 connect( ) 函数 生成 的 容器 组 件 来 替换 ThreadDisplay 组 件 的 声明 。 它 强大 的 地 
方 是 ， 当 这 样 做 之 后 ，React 组 件 对 store 的 唯一 引用 就 只 会 出 现在 一 个 地 方 ， 如 下 所 示 : 


<Provider store={store}> 
<App /> 
</Provider> 


将 store 的 引用 隔离 到 一 个 位 置 有 两 个 巨大 的 好 处 。 


第 一 个 好 处 在 前 面 讨论 容器 组 件 时 提 到 过 。 如 果 我 们 想 从 Redux 转移 到 其 他 状态 管理 范式 ,那么 
必须 要 存储 的 引用 越 少 ,需要 做 的 工作 就 越 少 。 我 们 的 映射 函数 只 是 JavaScript 函数 ， 可 以 方便 地 为 
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其 他 类 型 的 store 执行 映射 ， 只 要 该 store 的 API 与 Redux store 的 API 有 点 相似 即 可 。 

更 直接 的 好 处 是 测试 。 在 为 React 应 用 程序 编写 测试 时 , 你 可 能 希望 将 一 个 伪 store 注入 应 用 程序 
中 。 使 用 伪 store， 可 以 指定 每 个 用 例 应 返回 的 内 容 ， 或 断言 该 store 上 的 某 些 方法 已 被 调用 。 

通过 将 store 作为 一 个 属性 传递 给 Provider 组 件 , 而 不 是 在 应 用 程序 的 其 他 任何 地 方 直接 引用 它 ， 
我 们 可 以 在 测试 期 间 轻 松 地 交换 模拟 store。 

因此 , 我 们 需要 得 到 正在 显示 的 线程 id 来 分 派 ADD_MESSAGE 动作 。 但 我 们 在 dispatch 转 props 
的 函数 中 无 法 访问 到 此 属性 。 

connect( ) 函数 允许 传递 第 三 个 函数 ， 即 mergeProps。 因 此 ,传递 给 connect( ) 的 三 个 完整 函数 
如 下 所 示 : 
// 完整 的 connect() 的 函数 签名 


connect( 
mapStateToProps(state， [ownProps]), 
mapDispatchToProps(dispatch, [ownProps]), 
mergeProps(stateProps, dispatchProps, [ownProps]) 


) 




























































































在 connect() 函 数 中 ，ownProps 指 的 是 我 们 正在 生成 的 容器 组 件 上 的 属性 集 。 在 
本 例 中 ,它们 是 App 组 件 在 容器 组 件 ThreadTabs 或 ThreadDisplay 上 设置 的 任何 
属性 。 
接收 和 使 用 ownProps 参数 是 可 选 的 。 因 为 App 组 件 没有 在 容器 组 件 上 指定 任何 属 
性 ， 所 以 映射 函数 都 没有 使 用 第 二 个 参数 。 
调用 mergeProps 函数 需要 使 用 两 个 参数 : stateProps 和 dispatchProps。 它们 只 是 mapStateToProps 
和 mapDispatchToProps 返回 的 对 象 。 
因此 可 以 将 第 三 个 函数 传递 给 connect() ， 即 mergeThreadProps( ) 。 该 函数 将 使 用 以 下 两 个 参 
数 进 行 调用 : 
@ mapStateToThreadProps() 函 数 中 返回 的 对 象 ; 
e@ mapDispatchToThreadProps( ) 水 数 中 返回 的 对 象 。 
connect( ) 函数 将 使 用 mergeThreadProps( ) 函数 返回 的 对 象 作为 最 终 对 象 ， 以 此 来 确定 Thread 
组 件 的 属性 。 
connect ( ) 函数 将 按 顺 序 执行 以 下 操作 : 
(1) 使 用 state 调用 mapStateToThreadProps( ) 函数 ; 
(2) 使 用 dispatch 调用 mapDispatchToThreadProps( ) 函数 ; 
(3) 使 用 前 面 两 个 映射 函数 ( stateProps 和 dispatchProps ) 的 结果 调用 mergeThreadProps() 
函数 ; 
(4) 使 用 mergeThreadProps( ) 涵 数 返回 的 对 象 在 Thread 组 件 上 设置 这 些 props。 
在 mergeThreadProps() 函 数 内 部 ,需要 访问 两 个 条 目 来 创建 ADD_MESSAGE 分 派 函 数 : 
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@ 线程 的 id; 

e@ dispatch 国 数 本 身 。 

我 们 将 通过 stateProps 获得 该 线程 的 id， 因为 该 对 象 在 thread 下 具有 完整 的 线程 对 象 。 
要 访问 dispatch， 可 以 在 mapDispatchToThreadProps( ) 函数 中 传递 它 。 


加 
巨 ,| 网 
性 : 



































因此 ，mapDispatchToThreadProps() 函 数 将 定义 两 个 








@ onMessageClick ; 
@ dispatch。 


整 的 dispatch 转 props 的 国 数 如 下 所 示 : 
redux/chat intermediate/src/complete/App-16.js 





const mapDispatchToThreadProps = (dispatch) => ( 


{ 
onMessageClick: (id) => ( 
dispatch({ 
type: 'DELETE_MESSAGE', 
id: id， 
}) 


), 
dispatch: dispatch, 
} 
); 


























下 面 将 定义 最 终 的 映射 函数 。 ns state 转 props 映射 函数 和 dispatch 转 props 映射 函数 的 
结果 会 传递 给 这 个 “合并 ”函数 。 回 的 是 connect( ) 函数 用 来 绑 定 Thread 的 props 的 对 象 。 


an 函数 下 方 声明 这 个 函数 。 该 合并 函数 接收 两 个 参数 : 
redux/chat intermediate/src/complete/App-16.js 


























const mergeThreadProps = (stateProps, dispatchProps) => ( 








我 们 要 创建 一 个 包含 以 下 内 容 的 新 对 象 : 
@ 来 自 stateProps 的 所 有 属性 ; 

e@ 来 自 dispatchProps 的 所 有 属性 ; 
e@ 附加 属性 onMessageSubmit。 

让 我 们 看 看 它 是 什么 样 的 : 


redux/chat_ intermediate/src/complete/App-16.js 
































const mergeThreadProps = (stateProps, dispatchProps) => ( 
E 
. .StateProps, 
. .dispatchProps, 
onMessageSubmit: (text) => ( 
dispatchProps.dispatch({ 
type: 'ADD_MESSAGE', 
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text: text, 


threadld: 


stateProps.thread.idqd, 





我 们 使 用 扩展 操作 符 (... ) 将 stateProps 和 dispatchProps 复制 到 新 对 象 中 。 


onMessageSubmit 分 派 了 与 ThreadDisplay 组 件 之 前 分 派 的 相同 的 ADD_MESSAGE 动作 。 注意 , 我 








们 正在 从 dispatchProps 中 获取 dispatch 拯 数 : 





redux/chat intermediate/src/complete/App-16.js 


























dispatchProps.dispatch({ 





然后 从 stateProps 中 获取 线程 的 id: 


redux/chat intermediate/src/complete/App-16.js 





threadId: StateProps .thread.id， 





准备 好 两 个 映射 函数 和 一 个 合并 函数 后 , 现 厂 





件 了 。 




















E 可 以 使 用 





connect( ) 函数 来 生成 ThreadDisplay 组 


我 们 将 在 mergeThreadProps( ) 函数 下 方 声 明 ThreadDisplay 组 件 : 


redux/chat intermediate/src/complete/App-16.js 





const ThreadDisplay = connect( 
mapStateToThreadProps, 
mapDispatchToThreadProps, 











mergeThreadProps 
) (Thread); 
请 确保 从 App. js 中 删除 ThreadDisplay 组 件 的 旧 声 明 。 

















使 用 connect() 函数 的 mergeProps 参数 让 人 感觉 有 点 像 
函数 的 参数 时 非常 严格 ,不 过 它 是 故意 这 样 设计 的 。 由 于 拆 
因此 该 库 强制 执行 了 此 用 法 。 

然而 ,在 合并 函数 中 ， 我们 使 










































































FE 能 原 








种 变通 方法 ,这 是 因为 使 用 connect() 
因 并 防止 一 些 开 发 人 员 可 能 犯 的 错误 ， 











用 connect( ) 函数 按 需 生成 了 ThreadDisplay 组 件 。 我 们 删除 了 容 


器 组 件 周围 的 一 些 样板 代码 。 而 且 ， 我 们 将 Redux 和 React 之 间 的 连接 隔离 到 了 一 个 区 域 (作为 


Provider 组 从 





F 的 一 个 属性 )。 








让 我 们 检查 一 下 应 用 程序 能 否 正常 运行 。 





3. 试 试看 






































保 服务 器 正在 运行 。 接 着 导航 到 http://localhost:3600, 并 观察 应 用 程序 的 所 有 功能 是 否 
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属性 。 例 如 








12.6 ”动作 创建 器 


现在 ， 在 要 分 派 动作 的 每 
ESSAGE 动作 : 


1， 我们 都 声明 一 个 特定 类 型 的 动作 对 象 及 其 所 需 的 














个 实例 








DELETE_ 


dispatch({ 
type: 'DELETE_MESSAGE', 


id: id， 
}) 
在 应 用 程序 的 当前 迭代 中 ,我们 只 从 一 个 位 置 分 派 每 种 类 型 的 动作 。 随 着 Redux 应 用 程序 的 增长 ， 















































通常 会 从 多 个 位 置 分 派 同 一 动作 。 
一 种 流行 的 模式 是 使 用 动作 创建 器 来 创建 动作 对 象 。 动 作 创建 器 是 一 个 返回 动作 对 象 的 函数 。 
DELETE_MESSAGE 动作 的 动作 创建 器 如 下 所 示 : 


// DELETE_MESSAGE 动作 的 动作 创建 器 示例 
function deleteMessage(id) { 
































return { 
type: 'DELETE_MESSAGE', 
id: id, 
}; 
} 
然后 ， 在 应 用 程序 中 的 任何 位 置 ， 如 果 我 们 想 分 派 DELETE_MESSAGE 动作 ， 就 可 以 使 用 该 动作 创 





建 器 : 





用 动作 创建 器 

















eteMessage(id)); 
属性 名 。 更 重要 的 是 , 使 


[上 E 





dispatch(de 


这 是 一 个 简单 的 抽象 , 对 React 组 件 隐 藏 了 动作 的 type 和 
可 以 启用 某 些 高 级 模式 ， 比 如 将 API 请 求 与 动作 分 派 耦 合 在 一 起 


门 用 动作 创建 器 替换 动作 对 象 。 
下 进行 声明 。 
函数 接收 要 删 

















让 我 

首先 编写 动作 创建 舌 。 让 我 们 在 createStore( ) 初 始 化 store 的 那 一 行 下 I 

我 们 已 看 到 了 deleteMessage( ) 动 作 创 建 器 的 样子 。 该 动作 创建 器 是 一 个 函数 ,该 
除 消 息 的 id， 然 后 返回 一 个 类 型 为 DELETE_MESSAGE 的 对 象 : 


redux/chat intermediate/src/complete/App-17.js 























function deleteMessage(id) { 
return { 


type: 
id: id， 


}; 
} 
addMessage( ) 动 作 创 建 右 需要 一 个 text 和 threadId 作为 参数 : 


"DELETE_MESSAGCE ' ， 








redux/chat intermediate/Src/complete/App-17.js 





function addMessage(text，threadId) { 


return { 


type: 'ADD_MESSAGE', 
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text: text, 
threadId: threadId ， 
}; 
} 








openThread 动作 创建 器 需要 打开 指定 id 的 线程 : 


redux/chat intermediate/src/complete/App-17.js 








function openThread(id) { 
return { 
type: 'OPEN_THREAD', 
id: id 
}; 
} 


’ 











下 面 可 以 处 理 App.js， 并 用 新 的 动作 创建 器 来 蔡 换 动作 对 象 。 
首先 在 mapDispatchToTabsProps( ) 国 数 内 部 ; 


redux/chat intermediate/src/complete/App-17.js 

















const mapDispatchToTabsProps = (dispatch) => ( 
{ 
onClick: (id) => (人 
dispatch(openThread(id)) 
i 
} 
); 





接着 在 mapDispatchToThreadProps( ) 国 数 内 部 : 


redux/chat intermediate/src/complete/App-17.js 





const mapDispatchToThreadProps = (dispatch) => ( 
{ 
onMessageClick: (id) => ( 
dispatch(deleteMessage(id)) 
), 
dispatch: dispatch, 
} 
9 








最 后 在 mergeThreadProps( ) 子 数 内 部 : 


redux/chat intermediate/src/complete/App-17.js 





const mergeThreadProps = (stateProps, dispatchProps) => (人 
{ 
.. .StateProps, 
.. .dispatchProps, 
onMessageSubmit: (text) => ( 
dispatchProps.dispatch( 
addMessage(text，stateProps .thread.id) 
) 
外 





} 
3 























使 用 动作 创建 器 的 另 一 个 好 处 是 可 以 在 一 个 地 方 列 出 系统 中 所 有 可 能 的 动作 。 我 们 不 上 
能 采取 动作 的 形式 。 随 着 系统 中 动作 数量 的 增加 , 这 种 情况 会 更 加 





搜索 reducer 或 React 组 件 来 推断 可 

















恶化 。 


12.7 ”总结 














过 去 的 三 章 探讨 了 Redux 设计 模式 的 基本 原理 。 基 于 Redux 的 聊天 应 用 程序 的 架构 与 使 用 React 


的 组 件 状态 的 架构 完全 不 同 。 









































由 于 我 们 在 容器 组 件 中 定义 了 接近 叶子 组 件 的 函数 ， 因 此 不 必 担 心 会 通过 大 量 的 中 间 组 件 来 传 


递 属性 。 考 虑 到 我 们 可 能 会 向 每 个 线程 添加 更 多 数据 的 场景 ( 比如 用 户 的 个 人 资料 图 片 )， 只 需 调整 


容器 组 件 中 的 state 转 props 的 映射 函数 ， 即 可 将 个 人 资料 图 片 的 URL 提供 给 表示 组 件 。 
此 外 ,我 们 有 了 一 系列 的 reducer 函数 来 处 理 它们 各 自在 状态 树 中 的 部 分 状态 ， 而 不 是 人 



































用 一 个 


烦琐 的 项 级 组 件 来 执行 所 有 的 状态 管理 。 在 动作 影响 了 状态 树 的 多 个 部 分 的 场景 下 ， 这 个 优势 就 更 加 


突出 了 。 








想象 我 们 在 聊天 应 用 程序 











上 引入 














个 通知 计数 器 。 计 数 器 用 来 表示 未 读 线程 的 数量 。 每 次 用 








开 一 个 线程 时 ， 我 们 都 希望 使 这 个 计数 器 递减 。 
在 组 件 状 态 范式 中 ， 这 意味 着 函数 (比如 handleThreado0pen() ) 不 仅 会 影响 状态 树 的 














户 打 


activeThreadId 部 分 ， 而 且 还 将 负责 修改 通知 计数 器 。 在 此 模型 中 ， 影 响 状态 树 多 个 部 分 的 单个 操 





作 可 能 会 很 快 变 得 非常 麻烦 。 











使 用 Redux 后 ， 给 定 的 动作 对 状态 树 的 每 个 部 分 的 影响 会 被 隔离 到 每 个 reducer 中 。 在 我 们 的 例 
子 中 , 不必 接触 activeThreadIdReducer( ) 函数 来 合并 一 个 新 的 通知 计数 器 。OPEN_THREAD 动作 对 通 
知 计数 器 的 影响 将 与 该 状态 块 的 reducer 隔离 。 





异步 性 和 服务 器 通信 


















































开始 使 用 Redux 组 合 实际 应 用 程序 时 需要 考虑 的 最 后 一 个 概念 是 如 何 处 理 服务 器 通信 。 








Redux 没有 建立 内 置 的 机 制 来 处 型 





模式 。 








EE 异步 怕 





























E。 不 过 在 Redux 生态 系统 中 有 许多 处 理 异 步 性 的 工具 和 


虽然 本 书 不 会 讨论 Redux 中 的 异步 性 , 但 你 可 以 将 最 后 儿童 中 介绍 Redux 的 基础 知识 里 所 包含 的 
模式 和 库 集成 到 自己 的 应 用 程序 中 。 
































解决 异步 性 最 受 欢 迎 的 策略 之 一 是 使 用 redux-thunk 轻 量 级 中 间 件 。 使 用 redux-thunk 后 








可 以 让 分 派 调 用 执行 一 个 函数 ， 而 不 是 直接 将 动作 分 派 到 store 中 。 在 这 个 


请 求 ， 并 在 请 求 完 成 时 分 派 动 作 。 








有 关 使 用 redux-thunk 处 理 
































异步 的 详细 示例 ， 请 在 Redux 网 站 上 查看 教程 。 











， 你 


函数 中 ， 你 可 以 发 出 网 络 





使 用 GraphQL 














前 几 章 探讨 了 如 何 使 用 JSON 和 HTTP API 来 构建 与 服务 器 交互 的 React 应 用 程序 。 本 章 将 探讨 


GraphQL， 它 是 Facebook 开发 的 一 种 特定 的 API 协议 ， 能 很 自然 地 适合 React 生态 系统 。 








什么 是 GraphQL? 从 字面 上 看 ， 它 的 意思 是 “图 形 查询 语言 ”( Graph Query Language )。 如 果 使 
用 过 SQL 等 其 他 查询 语言 ， 那 么 你 可 能 会 对 它 很 熟悉 。 如 果 服 务 器 支持 GraphQL， 那 么 你 可 以 向 它 
发 送 一 个 GraphQL 查询 字符 串 并 期 望 得 到 一 个 GraphQL 响应 。 我 们 将 很 快 深入 讨论 细节 ，GraphQL 






































的 特性 使 它 特别 适合 跨 平台 应 用 程序 和 大 型 产品 团队 。 
为 了 找 出 原因 ， 让 我 们 先 做 一 点 示范 。 











13.1 第 一 个 GraphQL 查询 





























但 每 个 服务 器 通常 只 有 一 个 URL 端点 来 处 理 所 有 GraphQL 请 求 。 























典型 的 GraphQL 查询 是 使 用 HTTP 请 求 发 送 的 ， 类 似 于 我 们 在 前 面 章 节 中 发 送 API 请 求 的 方式 ， 


GraphQLHub 是 一 个 GraphQL 服务 ， 我们 将 在 本 章 中 使 用 它 来 学 习 GraphQL。 它 的 GraphQL 端 
点 是 https://www.graphqlhub.com/graphql， 我 们 将 使 用 HTTP POST 方法 来 发 出 GraphQL 查询 。 








启动 终端 并 发 出 以 下 cURL 命令 : 


$ curl - H 'Content-Type:application/graphql' - XPOST https: //www.graphqlhub.com/graph\ 


ql?pretty=true-d '{ hn { topStories(limit: 2) { title url } } }' 


{ 
"data": { 
"nnoae 
"topStories": [ 
{ 
"title": "Dropbox as a Git Server", 
"url": "http://www.anishathalye.com/206016/064/25/dropbox-as-a-true-git-serve\ 
r/" 
} 
] 
} 
} 
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返回 数据 可 能 需要 一 点 时 间 ， 但 你 应 该 可 以 看 到 一 个 JSON 对 象 ， 该 对 象 描述 了 Hacker News 上 
的 热门 文章 的 标题 和 地 址 。 恭 喜 你 ， 你 刚刚 已 成 功 执行 了 第 一 个 GraphQL 查询 ! 

我 们 来 分 析 一 下 该 cURL 中 发 生 的 事情 。 首 先 将 Content-Type 头 部 设置 为 application/ 
graphql , 用 于 向 GraphQLHub 服务 器 表明 我 们 正在 发 送 GraphQL 请 求 , 这 也 是 许多 GraphQL 服务 器 
的 常见 模式 〈 我 们 将 在 14.1 节 中 看 到 )。 

接 下 来 为 /graphql?pretty=true 端点 指定 了 一 个 POST 方法 。/graphql 部 分 是 路 径 ， 而 pretty 
查询 参数 用 来 指示 服务 器 返回 一 种 友好 的 缩 进 格式 的 数据 ( 而 不 是 以 一 行文 本 的 形式 返回 JSON )。 

最 后 ，cURL 命令 的 -d 参数 是 我 们 指定 POST 请 求 主体 的 方式 。 对 于 GraphQL 请 求 ， 主 体 通常 
一 个 GraphQL 查询 。 必 须 在 一 行 中 写 出 cURL 请 求 ， 但 当 我 们 正确 展开 并 缩 进 它 的 格式 时 ， 查 询 ; 
如 下 所 示 : 


// 一 行 展 示 
{ hn { topStories(limit: 2) { title url } } } 






























































Fou 











ES 


// 展开 后 
{ 
hn { 
topStories(limit: 2) { 
title 
url 
} 
} 
} 
这 是 一 个 GraphQL 查询 。 从 表面 上 看 ， 它 可 能 类 似 于 JSON， 且 它们 确实 有 一 个 共同 的 树 结构 和 
嵌 套 的 括号 ， 但 是 它们 在 语法 和 函数 上 有 重要 的 区 别 。 
注意 , 查询 的 结构 与 JSON 响应 中 返回 的 结构 相同 。 我 们 指定 了 一 些 名 为 hn、topStories title 
和 url 的 属性 ， 并 且 响 应 对 象 也 具有 对 应 准确 的 树 结构 (没有 多 余 或 缺失 的 条 目 )。 这 是 GraphQL 的 
关键 特性 之 一 : 你 可 以 从 服务 器 请 求 所 需 的 特定 数据 ， 而 服务 器 不 会 隐 式 返回 其 他 多 余数 据 。 
虽然 从 这 个 例子 中 并 不 能 明显 地 看 出 来 , 但 是 GraphQL 不 仅 跟 踪 了 可 用 于 查询 的 属性 , 还 跟踪 了 
每 个 属性 的 类 型 ( 如 number 、string 、boolean 多 。GraphQL 服务 器 知道 topStories 是 由 title 
和 url 条 目 组 成 的 对 象 列 表 , 且 title 和 url 是 字符 串 。GraphQL 类 型 系统 远 比 字符 串 和 对 象 强大 得 
多 ， 从 长 远 来 看 ， 随 着 产品 复杂 性 的 增加 ， 它 确实 为 我 们 节省 了 时 间 。 





































































































13.2 ”GraphaQlL 的 好 处 


现在 我 们 已 看 到 了 一 些 GraphQL 的 实际 应 用 ， 你 可 能 会 想 :“ 为 什么 有 人 喜欢 GraphQL 而 不 是 
REST 这 样 的 以 URL 为 中 心 的 AEI 呢 ? ” 乍 一 看 , 它 似乎 比 传统 协议 需要 更 多 的 工作 和 设置 一 一 我 们 
在 GraphQL 付出 额外 的 努力 中 得 到 了 什么 呢 ? 
首先 ， 通 过 声明 我 们 希望 从 服务 器 获得 的 确切 数据 ， 从 而 使 得 API 调用 变 得 更 容易 理解 。 对 于 刚 
进入 Web 应 用 程序 代码 库 的 新 手 来 说 ， 通 过 查看 GraphQL 查询 可 以 立即 看 出 哪些 数据 来 自 服务 器 ， 
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哪些 数据 来 自 客 户 端 。 


GraphQL 还 为 更 好 的 单元 测试 和 集成 测试 打开 了 大 门 : 





它 能 很 容易 地 在 客户 端 上 模拟 数据 ， 且 





可 


总 


以 断言 服务 器 的 GraphQL 变化 不 会 破坏 客户 端 代码 中 的 GraphQL 查询 。 
GraphQL 的 设计 还 考虑 了 性 能 , 尤其 是 在 移动 客户 端 方面 。 仅 指定 每 个 查询 所 需 的 数据 可 以 防止 





数据 的 过 度 获 取 〈 即 服务 器 检索 并 传输 最 终 被 客户 端 使 





于 提高 对 数据 大 小 敏感 的 移动 环境 的 速度 。 


传统 JSON API 的 开发 经 验 充其量 是 可 接受 的 ( 而 | 





用 的 数据 ) 这 样 可 以 减少 网 络 流量 ， 并 有 助 


日 通常 更 容易 让 人 生气 ),。 大 多 数 API 缺少 文档 ， 





或 者 更 糟 的 是 文档 与 API 的 行为 不 一 致 。API 可 能 会 发 生变 化 ， 但 并 不 能 立即 明显 地 显示 出 应 用 程序 
的 哪些 部 分 会 月 溃 〈 例 如 ， 通 过 编译 时 检查 )。 很 少 有 API 具备 发 现 属性 或 新 端点 的 能 力 ， 且 它们 通 


常 是 在 定制 的 机 制 中 进行 的 。 


GraphQL 极 大 地 改善 了 开发 人 员 的 体验 ， 它 的 类 型 系统 提供 了 一 种 生动 的 自 文 档 形式 ， 还 有 像 
GraphiQL 这 样 的 工具 〈 本章 会 用 到 ) 允许 我 们 对 GraphQL 服务 器 进行 自然 探索 ( 见 图 13-1 )。 


GraphQLHub Pp Prettify 


# Welcome to GraphQLHub! Type your Grav{ 


2 # explore the "Docs" to the right 
47{ 
5v hn 

6r topStories { 


最 后 ，GraphQL 的 声明 性 与 React 的 声明 性 


}, 


}, 
. 





图 13-1 


"topStories": [ 
{ 


"url": "http://www.su-tesla.space/2016/84 
"title": "Gentoo Tesla - T2 Edition", 
"by": { 

nid": 
了 


人 


"url": "https://github.com/Homebrew/brew/ 
"title"; "Homebrew now sends usage inform 
"by": { 

wid": 
} 


"aorth" 


"url": "http://motherboard.vice.com/read/ 
"title": "DARPA Is Looking For the Perfec 
"by": { 

vid": 


1 
使 用 


"mr_golyadkin" 





航模 式 





GraphiQL 导 











< HackerNewsAPI HackerNewsitem 4 


Stories, comments, jobs, Ask HNs and even polls are 
just items. They're identified by their ids, which are 
Unique integers 


FIELDS 


id: String! 

deleted: Boolean 
type: ltemType! 

by: HackerNewsUser! 
time: Int! 

timelSO: String! 

text: String 

dead: Boolean 

url: String 


score: Int 


能 很 好 地 匹配 。 包 括 Facebook 的 Relay 框架 在 内 的 一 


些 项 目 正 在 尝试 将 React 中 的 “ 共 置 查询 ”的 想法 变 为 现实 。 想 象 编写 一 个 React 组 件 ， 该 组 件 能 
动 从 服务 器 获取 所 需 数据 ， 而 不 需要 为 了 发 出 API 调用 或 跟踪 请 求 的 生命 周期 而 编写 黏合 代码 。 





随 着 你 的 





团队 和 产品 的 发 


展 , 所 有 这 些 好 处 者 








服务 融 之 间 交 换 数 据 的 主要 方式 的 原因 。 


13.3 GraphQL 和 民 


EST 


在 不 断 琶 加 , 这 就 是 它 逐 渐 成 为 Facebook 客户 端 和 


我 们 稍微 提 到 了 一 些 替 代 协 议 ， 下 面 专门 比较 一 下 GraphQL 和 REST。 
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REST 的 一 个 缺点 是 “端点 蠕 变 ”。 想 象 你 正在 构建 一 个 社交 网 络 应 用 程序 ， 并 从 /usery/:id/ 
profile 端点 开始 。 最 初 ， 这 个 端点 返回 的 数据 对 于 每 个 平台 和 应 用 程序 中 的 每 个 部 分 都 是 相同 的 ， 
但 你 的 产品 会 慢 慢 发 展 并 积累 更 多 适合 “配置 文件 ”的 特性 。 这 对 于 应 用 程序 的 新 部 分 来 说 是 有 问题 
的 ， 因 为 它们 只 需要 其 中 一 些 配置 文件 ， 比 如 新 闻 消 息 上 的 工具 提示 。 因 此 ， 你 可 能 最 终 会 创建 类 似 
/user/:id/profile_short 这 样 的 端点 ， 即 完整 配置 文件 的 受 限 版 本 。 

当 遇 到 更 多 需要 新 端点 的 情况 时 (想象 profile_medium1 )， 你 会 通过 调用 /profile 和 
/profile_short 来 复制 一 些 数据 ， 但 这 可 能 会 浪费 服务 器 和 网 络 资源 。 这 也 会 使 得 开发 过 程 让 人 更 
加 难以 理解 ， 比 如 开发 人 员 在 哪里 可 以 找到 每 个 变 体 返 回 的 数据 ?该 文档 是 最 新 的 吗 ? 

一 种 替代 创建 N 个 端点 的 方法 是 对 查询 参数 添加 一 些 类 似 于 GraphQL 的 功能 ， 比 如 /user/ :id/ 
profile?include=user.name,user.id。 这 人 允许 客户 端 指定 它们 想 要 的 数据 ， 但 是 仍 缺 少 GraphQL 
的 许多 特性 ， 这 些 特性 可 以 使 这 类 系统 长 期 工作 。 例 如 ,这 类 API 仍 没有 支持 弹性 单元 测试 和 长 生命 
周期 代码 的 强 类 型 信息 。 这 对 于 移动 应 用 程序 来 说 尤其 重要 ， 因 为 移动 应 用 程序 中 旧 的 二 进 制 文件 可 
能 长 期 存在 。 

最 后 ， 用 于 开发 和 调试 REST API 的 工具 通常 缺乏 吸引 力 ， 因 为 流行 的 API 之 间 的 共性 很 少 。 在 
最 低层 次 上 , 你 具有 一 些 通 用 的 工具 , 例如 cURL 和 wget， 某 些 API 可 能 支持 Swagger 或 其 他 文档 格 
式 ; 在 最 高 层次 上 ， 你 可 以 在 某 些 特定 的 API 中 找到 定制 的 实用 程序 ， 例 如 Elasticsearch 或 Facebook 
的 Graph API。GraphQL 的 类 型 系统 支持 内 省 〈 换 句 话说， 你 可 以 使 用 GraphQL 本 身 来 发 现 关 于 
GraphQL 服务 器 的 信息 )， 从 而 能 支持 可 插 拔 和 可 移植 的 开发 工具 。 













































































































































































13.4 GraphQL 和 SQL 


将 GraphQL 与 SQL 进行 比较 也 是 值得 的 (理论 上 它们 不 与 特定 的 数据 库 或 实现 绑 定 )。 目 前 已 经 
有 一 些 将 SQL 和 Facebook 查询 语言 (FQL ) 一 起 使 用 的 Web 应 用 程序 的 先例 ， 那 是 什么 让 GraphQL 
成 为 更 好 的 选择 呢 ? 

SQL 对 于 访问 关系 数据 库 非 常 有 帮助 ， 且 能 够 很 好 地 与 此 类 内 部 结构 化 的 数据 库 一 起 工作 , 但 是 
它 不 是 前 端 应 用 程序 来 消费 数据 的 方式 。 在 浏览 器 级 别处 理 连 接 和 聚合 之 类 的 概念 感觉 就 像 一 个 抽象 
的 漏洞 。 相 反 ， 我 们 通常 希望 把 信息 看 作 一 个 图 表 。 我 们 经 常 这 样 想 :“ 给 我 找到 这 个 特定 的 用 户 ， 
然后 给 我 找到 那个 用 户 的 朋友 ”， 而 “朋友 ”可 以 是 任何 类 型 的 连接 ， 比 如 照片 或 财务 数据 。 

这 里 还 有 一 个 安全 问题 一 一 我 们 很 容易 将 SQL 从 Web 应 用 程序 直接 插入 底层 数据 库 ， 这 将 不 可 
避免 地 导致 安全 问题 。 稍 后 将 介绍 ，GraphQL 还 支持 精确 的 访问 控制 逻辑 ， 可 以 控制 让 用 户 能 够 看 到 
哪些 类 型 的 数据 ， 且 通常 比 SQL 更 灵活 ， 不 像 使 用 原始 SQL 那样 不 安全 。 

请 记 住 ， 使 用 GraphQL 并 不 意味 着 你 必须 放弃 后 端的 SQL 数据 库 。GraphQL 服务 器 可 以 位 于 任 
何 数据 源 之 上 ， 无 论 是 SQL、MongoDB 、Redis， 还 是 第 三 方 API。 实 际 上 ，GraphQL 的 优点 之 一 是 
可 以 编写 一 个 单独 的 GraphQL 服务 器 ， 同 时 作为 多 个 数据 存储 (或 其 他 API ) 的 抽象 。 
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13.5 ”Relay 框架 和 GraphQL 框架 


我 们 已 讨论 了 很 多 关于 为 什么 应 该 考虑 GraphQL 的 内 容 ， 但 还 没有 深入 讨论 该 如 何 使 用 
GraphQL。 我 们 将 很 快 开始 揭示 更 多 关于 它 的 信息 ， 但 我 们 应 该 提 一 下 Relay。 


Relay 是 一 个 Facebook 的 框架 ， 用 于 将 React 组 件 连接 到 GraphQL 服务 器 。 它 人 允许 你 编写 如 下 代 
码 ， 此 代码 显示 了 Item 组 件 如 何 自动 从 Hacker News GraphQL 服务 器 中 检索 数据 : 


class Item extends React.Component { 
render() { 
let item = this.props.item; 









































return ( 
<div> 
<h1><a href={item.url}>{item.title}</a> </h1i> 
<h2>{item.score} - {item.by.id}</h2> 
《hz /> 
</div> 
) 
} 
}; 


Item = Relay.createContainer(Item, { 
fragments: { 
item: () => Relay.QL . 
fragment on HackerNewsItem { 
id 
title, 
score, 
url 
by { 
id 


}, 
}93 


Relay 在 后 台 智 能 地 处 理 了 批 处 理 和 缓存 数据 ， 并 提高 了 性 能 和 用 户 体 验 的 一 致 性 。 稍 后 将 深入 
研究 Relay， 但 这 个 例子 应 该 会 让 你 对 GraphQL 和 React 如 何 很 好 地 协同 工作 有 所 了 解 。 
关于 如 何 集成 GraphQL 和 React 还 有 其 他 的 新 兴 方 法 ， 例 如 Meteor 团队 的 Apollo。 


在 使 用 GraphQL 时 ， 你 也 可 以 不 使 用 React。 在 任何 使 用 传统 API 调用 的 地 方 都 可 以 轻松 使 用 
GraphQL， 包 括 与 Angular 或 Backbone 等 其 他 技术 一 起 使 用 。 












































13.6 ”本 章 预 览 


使 用 GraphQL 有 两 个 方面 : 作为 客户 端 或 前 端 Web 应 用 程序 的 技术 实现 ， 以 及 作为 GraphQL 服 
务 器 的 技术 实现 。 本 章 和 下 一 章 中 将 讨论 这 两 个 方面 。 
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作为 一 个 GraphQL 客户 端 ， 使 用 GraphQL 就 像 HTTP 请 求 一 样 简单 。 我 们 将 介绍 GraphQL 语言 
的 语法 和 特性 , 以 及 将 GraphQL 集成 到 JavaScript 应 用 程序 中 的 设计 模式 。 这 就 是 本 章 要 介绍 的 内 容 。 

作为 GraphQL 服务 器 ， 使 用 GraphQL 是 一 种 强大 的 方式 ， 它 可 以 在 基础 结构 (甚至 第 三 方 API ) 
中 的 任何 数据 源 上 提供 查询 层 。GraphQL 只 是 查询 语言 的 一 个 标准 ， 这 意味 着 你 可 以 用 任何 你 喜欢 的 
语言 (如 Java、Ruby 或 C ) 来 实现 GraphQL 服务 器 。 不 过 我 们 将 使 用 Node 来 实现 GraphQL 服务 器 。 
下 一 章 将 介绍 如 何 编写 该 服务 需 。 























13.7 使 用 GraphQL 


如 果 你 正在 使 用 GraphQL 从 服务 器 上 获取 数据 一 一 无 论 是 与 React， 或 者 是 另 一 个 JavaScript 库 ， 
还 是 本 机 iOS 应 用 程序 一 起 使 用 一 一 我 们 都 将 其 视 为 GraphQL 的 “客户 端 "。 这 意味 着 你 会 编写 
GraphQL 查询 ， 并 将 它们 发 送 到 服务 器 。 

因为 GraphQL 是 它 自己 的 语言 ， 所 以 本 章 将 帮助 你 熟悉 它 并 学 习 如 何 编写 惯用 的 GraphQL。 本 章 
还 将 介绍 查询 GraphQL 服务 器 的 一 些 机 制 (包括 各 种 库 )， 并 从 浏览 器 内 置 的 IDE (GraphiQL ) 开始 。 





























13.8 探索 GraphiQL 


本 章 的 开头 使 用 了 带 有 cURL 的 GraphQLHub 来 执行 GraphQL 查询 。 这 不 是 GraphQLHnub 提供 对 
其 GraphQL 端点 访问 的 唯一 方法 : 它 还 托管 了 一 个 称 为 GraphiQL 的 可 视 化 IDE。GraphiQL 是 由 
Facebook 开发 的 ， 它 可 以 用 最 少 的 配置 托管 在 任何 GraphQL 服务 器 上 使 用 。 

你 始终 可 以 使 用 cURL 之 类 的 工具 或 任何 支持 HTTP 请 求 的 语言 来 发 出 GraphQL 请 求 , 但 当 你 熟 
悉 了 特定 的 GraphQL 服务 器 或 普通 的 GraphQL 时 ，GraphiQL 将 尤其 有 用 。 它 提供 了 对 错误 或 建议 的 
预先 输入 支持 、 可 搜索 文档 (使 用 GraphQL 内 省 查询 动态 生成 )， 以 及 支持 代码 折 又 和 语法 高 之 显示 
的 JSON 查看 器 。 

可 以 通过 GraphQLHub 网 站 来 初步 了 解 GraphiQL ( 见 图 13-2 )。 



































GraphQLHub > Prettify 《 Docs 


1 # Welcome to GraphQLHub! Type your GraphQL query here, or 
2 explore the "Docs" to the right 


图 13-2 空白 的 GraphiQL 
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目前 还 没有 太 多 进展 ， 继 续 输入 之 前 使 用 了 cURL 的 GraphQL 查询 ( 见 图 13-3 )。 


1 # Welcome to GraphQLHub! Type your GraphQ 
2 # explore the "Docs" to the right 
3 
47{ 
5v hnf 
6 topStories(limit: 1) { 
7 title 
8 
2 
11 1 id 
by 


String The URL of the story. 


13-3 ”GraphiQL 查询 

















在 键 和 查询 时 ， 你 会 注意 到 非常 有 用 的 预 输 入 支持 。 如 果 你 犯 了 错误 ， 比 如 输入 了 一 个 不 存在 的 


字段 ，GraphiQL 会 立即 提醒 你 ( 见 图 








4 
hn 引 


13-4 )。 


topStoriesr1imi+” 2 { 
titl ©@ Cannot query field"urls" on type "HackerNewsltem". 


Wrls 
} 
和 
} 


13-4 ”GraphiQL 错误 


这 是 GraphQL 类 型 系统 在 工作 中 的 一 个 很 好 的 例子 。GraphiQL 知道 存在 哪些 字段 和 类 型 ， 而 在 本 
例 ， 可 以 看 到 HackerNewsItem 类 型 上 并 不 存在 urls 字段 。 稍 后 将 探讨 类 型 将 如 何 获取 其 字段 和 名 称 。 


EE 





点 击 顶部 导航 栏 中 的 “Play”( 运行 ) 按钮 来 执行 查询 。 你 会 看 到 新 数据 会 出 现在 右边 的 窗 格 中 


( 见 图 13-5 )。 


GraphQLHub Pp Prettify 


1 # Welcome to GraphQLHub! 


3 

47{ 

5v hnf{f 

6 topStories(limit: 2) { 
7 title 

8 url 

9 } 

10 | 3 


< Docs 


Type your GraphQL qiv { 
2 # explore the "Docs” to the right v 


"Ea 过 
民 "hnw: { 
"topStories": [ 


"title": "Bank of Japan Is an Estimated Top 10 
"urL": "http://ww.bloomberg.com/news/articles/ 


"title": "Dropbox as a Git Server", 
"url": "http://ww.anishathalye.com/2016/04/25/ 


} 
] 
} 
1 
1 


13-5 ”GraphiQL 数据 
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看 到 GraphiQL 右上 角 的 “Docs”( 文档 ) 按钮 了 吗 ? 可 以 点 击 它 来 展开 完整 的 文档 浏览 器 ( 见 
图 13-6 )。 


Documentation Explorer 本 


Search the schema ... 


A GraphQL schema provides a root type for each 
kind of operation. 


| 
rt ROOT TYPES 


query: GraphQLHubAPI 
6/ mutation: GraphQLHubMutationAPI 


图 13-6 ”GraphiQL 文档 


可 以 随意 点 击 并 选择 ， 但 最 终 会 返回 到 图 13-7 中 的 页 面 ( 顶级 页 面 )， 然 后 搜索 之 前 让 我 们 陷入 
麻烦 的 HackerNewsItem 类 型 。 





《 Schema Search Results x 


HackerNewsltem| 


SEARCH RESULTS 


HackerNewsltem 


图 13-7 GraphiQL 搜索 
点 击 匹 配 的 条 目 ， 它 将 带 你 进入 描述 HackerNewsItem 类 型 的 文档 ， 其 中 包括 一 个 描述 ( 由 人 工 


编写 , 不 是 生成 的 ) 和 类 型 上 所 有 字段 的 列表 。 你 可 以 点 击 字 段 和 它们 的 类 型 来 查找 更 多 信息 ( 见 图 13-8 
和 图 13-9 )。 
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《 Search Results HackerNewsltem x 


《 HackerNewsltem HackerNewsUser x 

Stories, comments, jobs, Ask HNs and even polls are 

just items. They're identified by their ids, which are 

unique integers Users are identified by case-sensitive ids. Only users 
that have public activity (comments or story 
submissions) on the site are available through the 


| FlELDS AP 
id: String! 
FIELDS 
deleted: Boolean 
type: ltemType! id: String! 
by: HackerNewsUser! delay: Int! 
图 13-8 ”GraphiQL HackerNewsItem 类 型 图 13-9 GraphiQL HackerNewsUser 类 型 
P p 





























如 你 所 见 ，HackerNewsItem 类 型 的 by 字段 具有 HackerNewsUser 类 型 ， 它 拥有 自己 的 一 组 字段 
和 链接 。 让 我 们 更 改 查询 以 获取 有 关 该 作者 的 信息 ( 见 图 13-10 )。 


GraphQLHub Pp Prettify 





1 # Welcome to GraphQLHub! Type your GraphQL query here, or v{ 

2 # explore the "Docs" to the right v "data": { 

3 MA "hn": { 

4v{ ” "topStories": [ 

5~ hn ~ { 

6~ topStories(CLimit: 2) { "title": "Bank of Japan Is an Estimated T 
7 title http://ww.bloomberg.com/news/art 
8 url 

9 by { "randomname2" 
10 id 
11 + 

12 + ~ 

13 } "title": "Dropbox as a Git Server", 

14 } "url": "http://ww.anishathalye.com/2016/ 

“by" 3 二 
"id": "anishathalye" 
+ 
+ 
] 
+ 
Es 


图 13-10 带 有 HackerNewsUser 类 型 的 GraphiQL 查询 


注意 ， 现 在 by 字段 在 查询 和 最 终 的 结果 数据 中 都 出 现 了 1! 
在 我 们 开始 深入 研究 GraphQL 机 制 时 ， 请 保持 选项 卡 中 GraphQLHub 的 GraphiQL 是 打开 状态 。 








13.9 ”GraphQL 语法 


让 我 们 深 人 全 和 一下 GraphQL 的 语义 。 我 们 已 使 用 了 一 些 术语 ， 如 “查询 ” “字段” 和 “类 型 ”， 
但 尚未 对 其 进行 正确 定义 ， 在 我 们 深入 研究 之 前 还 有 一 些 术语 需要 介绍 。 为 了 对 这 主题 进行 完整 且 
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正式 的 检查 ， 你 始终 可 以 参考 GraphQL 规范 。 
发 送 到 GraphQL 服务 器 的 整个 字符 串 称 为 文档 。 一 个 文档 可 以 有 一 个 或 多 个 操作 。 到 目前 为 止 ， 
示例 文档 只 有 一 个 查询 操作 ， 但 你 也 可 以 发 送 变更 操作 。 


查询 操作 是 只 读 的 ， 当 你 发 送 一 个 查询 时 ， 是 在 请 求 服务 器 给 你 一 些 数据 。 变 更 是 指 先 进行 写 操 
作 ， 然 后 进行 获取 操作 。 换 名 话说 就 是 “ 先 改 变 一 个 数据 ， 然 后 返回 一 些 其 他 的 数据 ”。 稍 后 将 更 多 
地 探讨 变更 , 但 它 和 查询 都 使 用 了 相同 的 类 型 系统 ， 且 语法 与 查询 相同 。 


下 面 是 一 个 只 有 一 个 查询 操作 的 文档 示例 : 


query getTopTwoStories { 
hn { 
topStories(limit: 2) { 
title 
url 
} 
} 
} 


注意 ， 我 们 在 原来 的 查询 前 面 加 上 了 getTopTwoStories 查询 ， 这 是 在 文档 中 指定 操作 的 完整 晶 正 
式 的 方式 。 首先 我 们 声明 操作 的 类 型 (query 或 mutation ), 然后 声明 操作 的 名 称 ( getTopTwoStories )。 
如 果 GraphQL 文档 只 包含 一 个 操作 ， 则 可 以 省 略 正式 的 声明 ，GraphQL 会 假定 我 们 的 意思 是 查询 : 


{ 
hn { 
topStories(limit: 2) { 
title 
url 
} 
上. 
} 


如 果 文 档 有 多 个 操作 ， 则 我 们 需要 为 每 个 操作 指定 一 个 唯一 的 名 称 。 下 面 是 一 个 包含 多 个 操作 的 
文档 示例 : 


query getTopTwoStories { 
hn { 
topStories(limit: 2) { 
title 
url 
} 
} 
} 






























































mutation upvoteStory { 
hn { 
upvoteStory(id: "11565911") { 
id 
score 
} 
} 
} 
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通常 , 我们 不 会 向 服务 带 发 送 多 个 操作 ,因为 GraphQL 规范 中 规定 服务 器 只 能 运行 每 个 文档 中 的 


一 个 操作 。 


Facebook 的 工程 师 在 高 级 性 能 优化 的 问题 评论 中 详细 介绍 了 允许 一 个 文档 中 进行 多 


个 操作 。 


这 就 是 文档 和 操作 ， 下 面 我 们 深入 研究 一 下 典型 的 查询 。 操 作 是 由 选择 ( selection ) 组 成 的 ， 而 
选择 通常 是 字段 。GraphQL 中 的 每 个 字段 表示 一 条 数据 ， 该 数据 可 以 是 不 可 约 的 标量 类 型 ( 在 下 面 定 
义 )， 也 可 以 是 由 很 多 标量 和 复杂 类 型 组 成 的 更 复杂 的 类 型 。 

在 前 面 的 示例 中 , title 和 url 是 标量 字段 ( 因为 string 是 标量 类 型 ), 而 hn 和 topStories 是 

















GraphQL 的 独特 之 处 在 于 我 们 必须 指定 选择 ， 直 到 它 完 全 由 标量 类 型 组 成 。 换 句 话说， 下 面 这 个 
查询 是 无 效 的 ， 因 为 nn 和 topStories 是 复杂 类 型 ， 并 且 查 询 不 以 任何 标量 字段 结束 : 


hn { 











topStories(limit: 2) { 


} 
} 
} 


如 果 在 GraphiQL 

















! 尝 试 此 操作 ， 它 会 立即 告诉 我 们 这 是 无 效 的 ( 见 图 13-11 )。 


# Wel @ Syntax Error GraphQL (7:5) Expected Name,found} / " 
# exp 
6: topStories(limit: 2) { 
{ We 
hn “ 
t 8: } 
二 
} 


图 13-11 没有 标量 的 GraphiQL 错误 

















从 客观 上 讲 ， 这 意味 着 GraphQL 查询 必须 是 明确 的 ， 并 且 它 强化 了 一 个 概念 ， 即 GraphQL 是 一 
种 只 获取 所 需 数 据 的 协议 。 

标量 类 型 包括 Int .Float 、String 、Boolean 和 ID( 强制 为 字符 串 ), GraphQL 提供 了 使 用 object、 
Interface、Union、Enum 和 List 类 型 将 这 些 标量 组 合成 更 复杂 类 型 的 方法 。 稍 后 会 分 别 讨论 这 
些 类 型 , 但 你 应 该 能 直观 地 看 到 , 它们 允许 我 们 组 合 不 同 的 标量 和 复杂 类 型 来 创建 强大 的 类 型 层次 








结构 。 












































此 外 ,字段 可 以 有 参数 。 可 以 将 所 有 字段 都 看 作 函 数 ， 这 很 有 用 ， 因 为 其 中 有 一 些 字段 正好 需要 
接收 参数 ， 就 像 其 他 编程 语言 中 的 函数 一 样 。 参 数 是 在 字段 名 后 面 的 括号 中 声明 的 ， 它 们 是 无 序 的 ， 

















甚至 是 可 选 的 。 在 前 画 








j 的 例子 中 ，limit 是 topStories 的 一 个 参数 : 
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{ 
hn { 
topStories(limit: 10) { 
url 
} 
} 
} 


参数 的 类 型 也 与 字段 相同 。 如 果 我 们 尝试 在 topStories 字段 上 使 用 一 个 字符 串 参 数 ， 那 么 
GraphiQL 会 向 我 们 显示 错误 ( 见 图 13-12 )。 























# Welcome to GraphQLHub! Type your GraphQL query here, or 
# explore the "Docs" to the right 


@ Argument "limit" has invalid value "10". 
hn { Expected type "Int", found "10". 
topStories(limit: "10") 工 
url 
+ 
} 


YY 


13-12 ”GraphiQL 错误 的 参数 类 型 


事实 证 明 , 1imit 实际 上 是 这 个 GraphQL 服务 器 的 一 个 可 选 参数 , 且 省 略 它 仍 是 一 个 完全 有 效 的 
查询 : 


{ 
hn { 
topStories { 
url 


} 
} 
} 


GraphQL 字段 的 参数 也 可 以 是 复杂 的 对 象 ， 称 为 输入 对 象 。 它 们 不 仅 可 以 是 我 们 已 展示 过 的 字符 
串 或 数字 标量 ,而且 可 以 是 任意 深度 向 套 的 键 和 值 映射 。 下 面 是 一 个 例子 , 其 中 storyData 参数 接收 
一 个 具有 url 属性 的 输入 对 象 : 
{ 
hn { 


createStory(storyData: { url: "http://fullstackreact.com" }) { 
url 
} 
} 
} 


GraphQL 服务 器 的 字段 集合 称 为 它 的 模式 (schema )。 像 GraphiQL 这 样 的 工具 可 以 下 载 整 个 模式 
( 稍 后 我 们 将 展示 如 何 实现 )， 并 将 其 用 于 自动 补 全 和 其 他 功能 。 
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我 们 已 讨论 了 标量 ， 但 只 涉及 复杂 类 型 ， 虽 然 我 们 在 示例 中 使 用 了 它们 。hn 字段 和 topStories 
字段 分 别 是 Object 类 型 字段 和 List 类 型 字段 的 示例 。 在 GraphiQL 中 ， 可 以 探索 它们 的 确切 类 型 一 一 
搜索 HackerNewsAPI 来 查看 hn 的 详细 信息 ( 见 图 13-13 )。 











< GraphQLHubAPI HackerNewsAPI 兴 


The Hacker News VO API 


FIELDS 


item(id: Int!): HackerNewsltem 

user(id: String!): HackerNewsUser 

topStories(limit: Int, offset: Int): [HackerNewsltem] 
newStories(limit: Int, offset: Int): [HackerNewsltem] 
showStories(limit: Int, offset: Int): [HackerNewsltem] 
askStories(limit: Ini, offset: Int): [HackerNewsltem] 
jobStories(limit: Int, offset: Int): [HackerNewsltem] 
stories(limit: Int, offset: Int, storyType: String!): 


[HackerNewsltem] 


图 13-13 ”HackerNewsAPI 类 型 


13.10.1 联合 
如 果 你 的 字段 实际 上 应 该 不 止 一 种 类 型 ， 那 该 怎么 办 ?例如 ， 如 果 你 的 模式 具有 某 种 通用 的 搜索 
功能 ， 那 么 它 可 能 会 返回 许多 不 同 的 类 型 。 
到 目前 为 止 ， 我 们 只 看 到 了 每 个 字段 都 是 一 种 类 型 的 例子 ,要么 是 标量 ,要 么 是 复杂 对 象 。 如 何 
处 理 像 搜 索 这 样 的 场景 呢 ? 


GraphQL 为 这 个 用 例 提供 了 一 些 机 制 。 首 先是 联合 ( union )， 它 允许 你 定义 一 个 新 类 型 ， 该 类 型 
是 其 他 类 型 列表 中 的 一 种 。 以 下 是 直接 来 自 GraphQL 规范 的 联合 示例 : 


union SearchResult = Photo | Person 









































type Person { 
name: String 
age: Int 

} 


type Photo { 
height: Int 
width: Int 
} 
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type SearchQuery { 
firstSearchResult: SearchResult 


} 

这 种 语法 看 起 来 应 该 不 怎么 熟悉 吧 ? 它 是 GraphQL 规范 使 用 的 一 种 非 正式 的 伪 代 码 变 体 , 用 于 描 
述 GraphQL 模式 。 我 们 不 会 使 用 这 种 格式 编写 任何 代码 , 这 纯粹 是 为 了 更 容易 地 描述 与 服务 器 代码 无 
关 的 GraphQL 类 型 。 

在 这 个 例子 中 , SearchQuery 类 型 有 一 个 firstSearchResult 字段 , 它 可 以 是 Photo 类 型 , 也 可 
以 是 Person 类 型 。 联 合 中 的 类 型 不 必 是 对 象 ， 它 们 可 以 是 标量 或 其 他 联合 ， 其 至 是 组 合 。 


13.10.2 片段 
如 果 你 仔细 观察 ， 就 会 发 现 Person 和 Photo 之 间 没 有 共同 的 字段 。 如 何 编写 一 个 GraphQL 查询 来 
处 理 这 两 种 情况 呢 ? 换 名 话说， 如 果 搜 索 返 回 一 个 Photo 类 型 ， 我 们 如 何 知道 要 返回 height 字段 呢 ? 
这 就 是 片段 (fragment ) 发 挥 作 用 的 地 方 。 片 段 允 许 你 对 独立 于 类 型 的 字段 集 进 行 分 组 ， 并 可 在 
整个 查询 过 程 中 进行 重用 。 对 于 上 面 的 模式 ， 使 用 片段 的 查询 可 能 是 这 样 的 : 
{ 














































































































firstSearchResult { 
. on Person { 
name 
} 
.on Photo { 
height 
} 
} 
} 


. on Person 称 为 内 联 片 段 。 简 单 来 说 ， 可 以 这 样 理解 :“ 如 果 firstSearchResult 是 Person 
类 型 ， 那 么 返回 name ; 如 果 是 Photo 类 型 ， 则 返回 height。” 
片段 不 一 定 要 内 联 。 它 们 可 以 命名 并 在 整个 文档 中 重复 使 用 。 可 以 用 已 命名 的 片段 重 写 上 面 的 
例子 : 





























{ 
firstSearchResult { 
. SearchPerson 
. SearchPhoto 
} 
} 





fragment searchPerson on Person { 
name 


} 


fragment searchPhoto on Photo { 
height 





这 将 允许 我 们 在 查询 的 其 他 部 分 中 使 用 searchPerson， 而 不 必 到 处 重复 编写 相同 的 内 联 片 段 。 
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13.10.3 ”接口 

除了 联合 之 外 ,GraphQL 还 支持 接口 (interface ), 你 可 能 在 Java 之 类 的 编程 语言 中 已 对 此 非常 熟 
悉 。 在 GraphQL 中 ， 如 果 一 个 对 象 类 型 实现 了 接口 ， 那 么 GraphQL 服务 器 将 强制 该 类 型 具有 接口 所 
需 的 所 有 字段 。 实 现 接口 的 GraphQL 类 型 也 可 以 有 自己 的 字段 ， 而 这 些 字段 不 是 由 接口 指定 的 , 并 且 
一 个 GraphQL 类 型 可 以 实现 多 个 接口 。 

继续 搜索 的 例子 ， 可 以 假设 搜索 引擎 有 这 样 的 模式 : 


interface Searchable { 
searchResultPreview: String 


} 




































































type Person implements Searchable { 
searchResultPreview: String 
name: String 
age: Int 

} 


type Photo implements Searchable { 
searchResultPreview: String 
height: Int 
width: Int 

} 


type SearchQuery { 
firstSearchResult: Searchable 


} 

让 我 们 分 解 一 下 。 现 在 ，firstSearchResult 会 保证 返回 一 个 实现 Searchable 接口 的 类 型 。 
为 这 个 未 知 类 型 实现 了 Searchable 接口 。 

操作 、 类 型 (标量 和 复杂 类 型 ) 和 字段 是 GraphQL 的 基本 元 素 ， 可 以 使 用 它们 来 组 合 高 阶 模式 。 














13.11 探索 Graph 
我 们 已 探讨 了 GraphQL 的 “QL”, 但 在 “Graph”( 图 ) 部 分 上 并 没有 涉及 太 多 。 











2 我 们 所 说 的 “图 ”并 不 是 指 条 形 图 或 其 他 数据 的 可 视 化 ,而 是 指 更 具 数 学 意义 的 图 。 





图 是 由 一 组 相互 链接 的 对 象 组 成 的 。 每 个 对 象 称 为 一 个 节点 ， 一 对 对 象 之 间 的 链接 称 为 边 。 你 可 
能 不 习惯 用 这 种 词汇 来 思考 产品 的 数据 ， 但 令 人 惊讶 的 是 ， 它 可 以 表示 大 多 数 应 用 程序 。 
让 我 们 来 看 Facebook 用 户 的 图 ( 见 图 13-14 )。 












































13.11 


探索 Graph 
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图 13-14 ” Facebook 用 户 图 
但 也 要 考虑 像 Asana 这 样 的 生产 力 应 用 程序 的 图 ( 见 图 13-15 )。 





图 13-15 ” Asana 用 户 图 
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即使 Asana 不 是 一 个 真正 的 社交 网 络 ， 产 品 的 数据 仍 可 以 形成 一 个 图 。 

请 注意 , 这 仅仅 因为 产品 的 数据 类 似 于 图 形 结构 , 并 不 意味 着 我 们 需要 使 用 图 形 数据 库 : Facebook 
和 Asana 的 底层 数据 存储 通常 是 MySQL, 但 MySQL 本 身 并 不 支持 图 形 操作 。 任 何 数据 存储 ,无 论 是 
关系 数据 库 、 键 值 存储 还 是 文档 存储 ， 都 可 以 在 GraphQL 中 显示 为 图 形 。 





































































































理想 的 GraphQL 模式 可 以 紧密 地 模拟 数学 图 
型 的 预览 : 
{ 


viewer { 
id 
name 
likes { 
edges { 
cursor 
node { 
id 
name 
} 
} 
} 





node(id: "123123") { 
id 
Name 
} 
} 











区 的 形状 和 术语 。 下面 是 我 们 将 要 探索 的 图 形 模式 类 


当 数 据 来 自 REST 之 类 的 API 时 , 添加 这 些 额 外 的 字段 展 (edges 、node 等 ) 似乎 是 过 度 设 计 。 
然而 ， 这 些 模式 是 在 创建 Facebook 时 出 现 的 ， 它 能 为 产品 的 发 展 和 新 特性 的 添加 提供 基础 。 

接 下 来 的 几 节 中 将 描述 的 模式 源 自 Relay 所 需 的 GraphQL 模式 。 即 使 你 不 使 用 Relay， 这 种 对 
GraphQL 模式 的 思考 方式 也 会 让 你 免 于 “与 框架 做 斗争 ”， 并 且 如 果 未 来 有 Relay 之 外 的 GraphQL 前 














端 库 继续 采用 这 种 方式 ， 那 么 也 就 不 足 为 奇 了 。 
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对 图 进行 查询 时 ,通常 需要 从 节点 开始 查询 。 应 用 程序 要 么 直接 在 一 个 节点 上 获取 字段 ,， 要么 查 



































找 它 具 有 的 连接 。 
例如 ， 在 Facebook 中 要 查询 “当前 用 户 的 消息 ”， 则 需要 从 当前 用 





























该 节点 的 所 有 “消息 项 ”的 节点 。 














在 惯用 的 GraphQL 中 ， 通 常会 定义 一 个 简单 的 节点 接 











interface Node { 
id: ID 
} 














户 的 节点 开始 ， 并 探索 连接 到 


口 ， 如 下 所 示 : 
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因此 任何 实现 这 个 接口 的 对 象 都 应 该 有 一 个 id 字段 。 请 记 住 ,在 前 面 ID 标量 类 型 已 被 转换 为 字 
符 串 。 如 果 你 来 自 REST 世界 ， 那 么 这 有 点 类 似 于 使 用 URL ( 如 /$nounsy/:id ) 来 查询 资源 。 

惯用 的 GraphQL 和 其 他 协议 的 一 个 主要 区 别 是 ， 所 有 节点 ID 都 应 该 是 全 局 唯一 的 。 换 名 话说 ， 
ID 为 “1” 的 用 户 和 JPD 为 “1” 的 图 片 将 是 无 效 的 ， 因 为 ID 会 发 生 冲 突 。 

因此 你 还 应 该 公开 一 个 顶级 字段 ， 让 你 可 以 通过 ID 查询 任意 节点 ， 如 下 所 示 : 


























node(id: "the_id") { 
id 
} 
} 















































如 果 ID 在 类 型 之 间 发 生 冲 突 ， 

















就 无 法 确定 该 字段 返回 的 内 容 。 如 果 你 使 用 的 是 关系 数据 库 ， 这 














可 能 会 让 人 感到 困惑 ， 因 为 在 默认 情况 下 ， 主 键 只 能 保证 每 个 表 是 唯一 的 。 一 种 常见 的 技术 是 在 数据 





库 ID 前 面 加 上 一 个 与 类 型 对 应 的 字 


const findNode = (id) => { 
const [ prefix, dbld ] = id 

if (prefix === 'users') { 
return database.usersTabl 











else if ( ... ){ 
} 
上 


const getUser = (id) => { 
let user = database.usersTa 
user.id = “users:${user.id} 
return user; 


}; 














符 串 ， 从 而 使 ID 再 次 变 成 唯一 的 。 伪 代码 如 下 所 示 : 





.split(":"); 


e.find(db1d); 


ble. find(id); 


7 





每 当 GraphQL 服务 器 (通过 getUser ) 返回 一 个 用 户 时 ， 它 都 会 更 改 数据 库 ID 以 使 其 唯一 。 然 
后 ， 当 (通过 findNode ) 查找 一 个 节点 时 ， 我 们 将 读 取 ID 的 “作用 域 ” 并 采取 适当 的 操作 。 这 也 突 























出 了 ID 在 GraphQL 中 是 字符 串 的 一 个 优点 ， 因 为 它们 允许 像 这 样 的 可 读 更 改 。 





























为 什么 希望 能 够 使 用 node(ig: ) 字 段 来 查询 任何 节点 ? 它 使 我 们 更 容易 “刷新 ”Web 应 用 程序 中 
过 时 的 数据 ， 而 不 必 跟 踪 模 式 中 的 数据 来 自 何 处 。 如 果 我 们 知道 待 办 事项 列表 项 的 状态 已 更 改 ， 那么 
应 用 程序 应 该 能 够 从 服务 器 中 查找 到 最 新 状态 ， 而 无 须知 道 它 属于 哪个 项 目 或 组 。 

通常 ， 应 用 程序 不 会 一 开始 就 查询 全 局 节点 ID， 那么 如 何在 GraphQL 中 描述 “当前 用 户 的 节点 ” 
呢 ? 查看 器 模式 ( viewer pattern ) 正好 派 上 用 场 。 
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除了 node(ig: ) 字 上 段 之 外 ， 如 玉 
“viewer” 表 示 当 前 用 户 以 及 与 该 用 
实现 Node 接口 。 














GraphQL 模式 具有 一 个 顶级 的 viewer 字段 ， 那 么 会 非常 有 用 。 
户 的 连接 。 在 模式 级 别 ，viewer 的 类 型 应 该 像 其 他 节点 类 型 一 样 
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如 果 你 来 自 REST, 这 可 能 是 隐 式 发 生 的 , 或 者 你 的 所 有 端点 都 带 有 前 缀 , 例如 /users/me/$resources。 




















GraphQL 更 倾向 于 使 用 显 





式 行为 ， 这 就 是 viewer 字段 存在 的 原因 。 

















假设 我 们 正在 用 GraphQL 编写 一 个 Slack 应 用 程序 。 在 消息 传递 应 用 程序 中 , 一 切 都 是 以 viewer 
为 中 心 的 (比如 “我 有 什么 消息 ”， 以 及 “我 订阅 了 哪些 频道 ”等 )， 因 此 查询 应 如 下 所 示 : 














{ 
viewer { 
id 
messages { 
participants 
id 
name 
} 
unreadCount 
} 
channels { 
name 
unreadCount 
} 
} 
} 












































{ 











如 果 我 们 没有 顶级 viewer 字段 ， 则 要 么 必须 进行 两 次 服务 器 调用 (“首先 获取 当前 用 户 的 ID， 
)， 要 么 进行 隐 式 返回 当前 用 户 数据 的 顶级 messages 和 channels 字段 。 

稍 后 当 实现 自己 的 GraphQL 服务 器 时 ， 我 们 会 看 到 使 用 viewer 字段 也 使 得 实现 授权 逻辑 ( 即 防 
止 一 个 用 户 查看 另 一 个 用 户 的 消息 ) 变 得 更 加 容易 。 





然后 获取 该 用 户 的 消息 ” 
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在 上 面 最 后 一 个 以 viewer 为 中 心 的 查询 示例 中 ， 我 们 有 两 个 字段 ， 可 以 将 它们 视 为 到 其 他 节点 


集合 (messages 和 channels ) 的 连接 。 对 于 简单 | 


是 ,如 果 数 据 集 非常 大 ， 
一 个 数组 中 。 








且 小 的 数据 集 ， 可 以 返回 所 有 这 些 节 点 的 数组 。 但 


会 发 生 什么 呢 ? 如 果 我 们 加 载 类 似 Reddit 的 帖子 ， 那么 肯定 不 能 将 它们 放 入 





通常 加 载 大 数据 集 的 方法 是 分 页 。 许 多 API 可 以 允许 你 传人 一 些 查询 参数 ， 比 如 ?page=3 或 
者 ?1imit=25&offset=50， 以 便 在 更 大 的 列表 上 进行 遍历 。 这 对 于 数据 相对 稳定 的 应 用 程序 来 说 效果 
很 好 , 但 它 会 意外 导致 一 些 近 实时 数据 更 新 的 应 用 程序 的 不 良 体验 : Twitter 的 消息 之 类 的 内 容 可 能 会 








二 
加 











目的 GraphQL 对 女 
用 pages, 或 者 1imit 和 
简单 来 说 , 一 个 Gra 






































在 用 户 浏览 时 添加 新 的 推 文 ， 这 会 脱离 偏 移 量 计算 并 导致 在 加 载 新 页 面 时 数据 发 生 重复 。 
有 基于 游标 的 分 页 来 解决 这 个 问题 提出 了 强烈 的 见解 。GraphQL 请 求 不 使 














0 何 使 月 
offset ， 而 是 通过 游标 ( 通常 是 字符 串 ) 来 指定 列表 中 接 下 来 要 加 载 























的 位 置 。 

















phQL 请 求 检索 一 组 初始 节点 ,每 个 节点 返回 一 个 唯一 的 游标 。 当 应 


要 加 载 更 多 数据 时 ， 它 会 发 送 一 个 新 的 请 求 ， 相 当 于 “在 游标 XYZ 之 后 给 我 10 个 节点 ”。 
让 我 们 尝试 使 用 支持 游标 的 GraphQL 端点 。 看 一 下 这 个 可 以 发 送 给 GraphQLHub 的 查询 : 








用 程序 需 
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hn2 { 
nodeFromHnId(id:"dhouston", isUserIld:true) { 
. ON HackerNewsV2User { 
submitted(first: 2) { 
pageInfo { 
hasNextPage 
hasPreviousPage 
startCursor 
endCursor 
} 
edges { 
cursor 
node { 
id 
.on HackerNewsV2Comment { 
text 








这 是 个 相当 大 的 查询 ， 让 我 们 对 其 进行 分 解 。 首 先 使 用 nodeFromHnId 获取 初始 节点 (该 节点 检 
索 了 Drew Houston 的 Hacker News 账户 )， 然 后 再 获取 submitted 连接 中 的 前 两 个 节点 。 

GraphQL 连接 有 两 个 字段 ，pageInfo 和 edges。pageInfo 是 关于 特定 “页 面 ” 的 元 数据 ( 请 记 
住 ， 这 更 像 是 一 个 移动 的 “窗口 ”， 而 不 是 页 面 )。 前 端 代码 可 以 使 用 此 元 数据 来 确定 何 时 以 及 如 何 加 
载 更 多 信息 。 举 个 例子 ， 如 果 hasNextPage 值 为 true， 则 可 以 显示 相应 的 按钮 来 加 载 更 多 项 。edges 
字段 是 实际 节点 的 列表 。edges 中 的 每 个 条 目 都 包含 该 节点 的 cursor 以 及 node 本 身 。 

请 注意 ， 节 点 id 和 cursor 是 分 开 的 字段 。 在 某 些 系统 中 ,使 用 id 作为 游标 的 一 部 分 可 能 比较 
合适 (例如 ,标识 符 是 原子 递增 的 整数 ), 但 其 他 系统 可 能 更 喜欢 将 cursor 作为 时 间 惟 、 偏 移 量 或 两 
者 兼 而 有 之 的 函数 。 通 常 ， 游 标 是 不 透明 的 字符 串 ， 且 在 一 段 时 间 后 可 能 会 失效 (如果 后 端 临 时 缓存 
搜索 结果 )。 

假设 这 是 该 查询 返回 的 数据 : 

{ 


"nodeFromHnId": { 
"submitted": { 
"pageInfo": { 
"hasNextPage": true, 
"hasPreviousPage": false, 
"startCursor": "YXJyYX] jb25uZWN@OaW9u0OjE="， 
"endCursor": "YXJyYX]ljb25uZWN@OaW9u0jI=" 












































































































































"edges": [ 


{ 
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"cursor": "YXJyYXljb25uZWN@OaW9u0jE=", 


"node": { 
"id": "aXRlbToiMzgxNjk@", 
"text": "it's not going anywhere :)<p>(actually, come work on it: «a hre\ 


f=\"https://www.dropbox.com/jobs\" rel=\"nofollow\">https://www.dropbox.com/jobs</a»\ 
D> 


} 
]5 
人 
"cursor": "YXJyYX1jb25u2WNOawW9u0OjI=" ， 
"node": { 
"id": "aXRlbToONjgxMzY2", 
"text": "yes we are :)" 
} 
} 
] 
} 
} 


看 一 下 这 些 字段 是 如 何 匹 配 的 , edges 中 的 第 一 个 cursor 匹配 startCursor , endCursor 则 匹配 
最 后 一 个 节点 的 cursor。 我 们 的 前 端 代码 可 以 使 用 endCursor 来 构造 查询 ， 并 使 用 after 参数 获取 
下 一 组 数据 : 


{ 
hn2 { 
nodeFromHnId(id:"dhouston", isUserIld:true) { 
. ON HackerNewsV2User { 
submitted(first: 2, after: "YXJyYX1 jb25uZWNOawo9uOjI=") { 
pageInfo { 
hasNextPage 
hasPreviousPage 
startCursor 
endCursor 
} 
edges { 
cursor 
node { 
id 
.on HackerNewsV2Comment { 
text 





























存在 于 连接 上 的 其 他 参数 是 before 和 after ( 用 于 接收 游标 ), 以 及 first 和 1ast (用 于 接收 整 
羯 。 
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如 果 你 习惯 了 在 REST 中 进行 分 页 ， 那 么 游标 模式 可 能 会 显得 见长 ,但 是 请 花 五 分 钟 的 时 间 来 研 
究 一 下 我 们 演示 的 Hacker News 分 页 API。 游 标 分 页 在 实时 更 新 的 场景 下 是 稳健 的 ， 且 在 加 载 节 点 时 
允许 更 多 可 重用 的 应 用 程序 级 别 的 代码 。 稍 后 当 我 们 实现 自己 的 GraphQL 服务 器 时 , 会 展示 如 何 实现 
这 种 模式 ， 你 会 看 到 它 并 不 像 最 初 看 起 来 那样 令 人 生 旦 。 
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当 第 一 次 介绍 操作 时 ,我 们 提 到 了 变更 操作 会 伴随 着 只 读 查 询 操作 存在 。 大 多 数 应 用 程序 需要 一 
种 将 数据 写 人 服务 器 的 方式 ， 这 便 是 变更 操作 的 用 途 。 

对 于 类 似 REST 的 协议 ，POST、PUT 和 DELETE 的 HTTP 请 求 通常 会 触发 修改 。 从 这 个 层面 上 说 ， 
GraphQL 和 REST 都 试图 将 只 读 请 求 与 写 请 求 分 开 。 那 么 ,使 用 GraphQL 有 什么 好 处 呢 ? 由 于 GraphQL 
修改 利用 了 GraphQL 的 类 型 系统 ， 因 此 你 可 以 声明 希望 在 变更 后 返回 的 数据 。 

例如 ， 可 以 在 GraphQLHub 上 尝试 使 用 此 变更 来 编辑 内 存 中 键 值 存储 : 


mutation { 
keyValue_setValue(input: { 
clientMutationId: "browser", id: "this-is-a-key", value: "this is a value" 















































这 里 的 修改 字段 是 keyvValue_setValue, 它 接收 一 个 input 参数 , 该 参数 提供 要 设置 的 键 和 值 的 
信息 。 但 也 可 以 挑选 变更 操作 返回 的 字段 ， 即 item 或 者 我 们 想 要 从 中 得 到 的 任何 一 组 字段 。 如 果 运 
行 该 请 求 ， 则 会 得 到 以 下 这 种 有 效 载 葵 : 











{ 
"data": { 
"keyValue_setValue": { 
"item": { 
"value": "some value", 
"id": "someKey" 
} 
} 
} 
} 





在 REST 的 世界 里 ， 我 们 会 被 请 求 返回 的 数据 所 困扰 ， 随 着 产品 的 发 展 ， 我 们 可 能 不 得 不 对 客户 
端 和 服务 器 上 的 有 效 载荷 进行 许多 修改 。 使 用 GraphQL 意味 着 服务 器 和 客户 端 在 将 来 会 更 具 弹 性 和 灵 
活性 。 

变更 操作 除了 要 求 指定 mutation 操作 类 型 之 外 ， 其 他 的 是 普通 的 GraphQL: 它 同样 具有 类 型 、 
字段 和 参数 。 稍 后 我 们 将 在 实现 自己 的 GraphQL 模式 时 看 到 ， 在 服务 器 上 进行 实现 也 是 类 似 的 。 
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13.16 ”订阅 








我 们 已 讨论 了 GraphQL 操作 的 两 种 主要 类 型 : query 和 mutation ， 但 还 有 第 三 种 类 型 的 操作 正 





在 开发 中 , 即 subscription。 订阅 的 应 用 场景 是 处 理 Twitter 和 Facebook 等 应 用 程序 中 出 现 的 实时 更 
新 ， 





























在 这 些 应 用 程序 中 ， 用 户 无 须 手 动 刷 新 就 可 以 更 新 某 项 内 容 的 赞 或 评论 数量 。 
这 提供 了 良好 的 用 户 体验 , 但 在 技术 层面 上 的 实现 往往 很 复杂 。GraphQL 主张 服务 器 应 该 发 布 可 


















































以 订阅 的 事件 集 〈 比如 一 个 帖子 的 新 上 赞 )， 并 且 客 户 端 可 以 对 其 进行 选择 订阅 。 查 看 Facebook 在 其 文 

















档 


:提供 的 订阅 示例 ， 如 下 所 示 : 








input StoryLikeSubscribeInput { 
storyld: string 
clientSubscriptionId: string 


} 


subscription StoryLikeSubscription($input: StoryLikeSubscribeInput) { 
storyLikeSubscribe(input: $input) { 
story { 
likers { count } 
likeSentence { text } 
} 
} 
} 


使 用 这 个 订阅 发 出 一 个 GraphQL 请 求 ， 实 际 上 是 告诉 服务 器 :“ 嘿 ， 这 是 每 次 发 生 StoryLike- 








Subscription 事件 时 我 需要 的 数据 ,这 是 我 的 clientSubscriptionId， 这 样 你 就 知道 在 哪里 可 以 找 
到 我 。 注意 ， 使 用 clientSubscriptionId 或 任何 有 关 订 阅 操作 的 细节 都 不 是 GraphQL 所 特有 的 。 
它 仅 保留 可 接受 的 subscription 操作 类 型 ， 并 根据 每 个 应 用 程序 处 理 实时 更 新 。 


SubscriptionId 一 起 使 用 ， 但 也 有 其 他 方案 ， 包 括 WebSockets 、Server-Sent Events 或 其 他 机 制 。 用 

















客户 端 如 何 订阅 更 新 的 机 制 不 在 GraphQL 的 范畴 内 。Facebook 提 到 可 以 将 MQTT 与 client- 












































伪 代 码 表示 其 过 程 如 下 所 示 : 


var clientSubscriptionId = generateSubscriptionId(); 

// 此 “通道 ”可 以 是 WebSockets、MQTT 等 
connectToRealtimeChannel(clientSubscriptionId, (newData) => {}); 
// 发 送 GraphQL 请 求 来 告知 服务 器 可 以 开始 发 送 更 新 
sendGraphQLSubscription(clientSubscriptionId) 


GraphQL 实 现 订阅 的 方式 ( 服务 器 允许 订阅 有 限 的 可 能 事件 列表 ) 与 其 他 框架 ( 如 Meteor ) 不 同 ， 

















后 者 所 有 数据 都 是 默认 可 订阅 的 。 正 如 Facebook 的 工程 师 在 其 文档 “中 所 详 述 的 那样 ， 这 种 类 型 的 系 
统 通常 很 难 设计 ， 尤 其 是 大 规模 设计 。 




















人 参见 GraphQL 网 站 文章 “Subscriptions in GraphQL and Relay”。 
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13.17 ” GraphQL 和 JavaScript 结合 使 用 





到 目前 为 止 ， 我 们 一 直 在 对 所 有 GraphQL 查询 使 用 cURL 和 GraphiQL ， 但 是 最 终 我 们 将 要 编写 
JavaScript Web 应 用 程序 。 如 何在 浏览 器 中 发 送 GraphQL 请 求 呢 ? 

你 可 以 使 用 任何 你 喜欢 的 HITP 库 ， 可 以 是 jQuery 的 AJAX 方法 其 至 是 使 用 原生 的 
XmlHttpRequests， 这 让 你 可 以 在 较 旧 的 非 ES2015 的 应 用 程序 中 使 用 GraphQL。 但 因为 我 们 正在 研究 
现代 JavaScript 应 用 程序 在 React 生态 系统 中 的 工作 方式 ， 所 以 将 研究 ES2015 的 fetch。 


启动 Chrome， 打 开 GraphQLHub 网 站 ， 然 后 再 打开 一 个 JavaScript 调试 器 。 


de 






































尔 可 以 通过 点 击 Chrome 浏览 器 的 “汉堡 包 ” 图 标 并 选择 More Tools > Developer Tools 
来 打开 Chrome DevTools JavaScript 调试 器 ， 或 者 也 可 以 通过 在 页 面 上 点 击 右键 ， 选 
择 Inspect， 然 后 点 击 Console 选项 卡 来 打开 。 


现代 版 本 的 Chrome 支持 开 箱 即 用 的 fetch ， 这 使 得 原型 制作 非常 方便 ， 但 你 也 可 以 使 用 任何 其 
他 工具 来 支持 polyfill fetch。 尝 试 一 下 这 段 代 码 : 


var query = ' { graphQLHub } '; 
var options = { 
method: 'POST', 
body: query, 
headers: { 
'content-type': 'application/graphql' 
} 
}; 








fetch('https://graphqlhub.com/graphql', options).then((res) => { 
return res.json(); 

}).then((data) => { 
console.1log(JSON.stringify(data, null, 2)); 


})s 
这 里 的 配置 应 该 类 似 于 cURL 的 设置 。 我们 使 用 了 POST 方法 , 并 设置 了 适当 的 content-type 标 
头 ， 然 后 使 用 GraphQL 查询 字符 串 作 为 请 求 体 。 等 待 代码 执行 完毕 ， 我 们 应 该 会 看 到 如 下 输出 : 
{ 
"data": { 
"graphQLHub": "Use GraphQLHub to explore popular APIs with GraphQL! Created by CN 


lay Allsopp @clayallsopp" 
} 


} 
恭喜 ， 你 刚刚 用 JavaScript 运行 了 一 个 GraphQL 查询 ! 因为 GraphQL 请 求 最 后 只 是 HTTP 请 求 ， 


所 以 你 可 以 逐步 地 将 API 调用 转移 到 GraphQL ， 而 不 必 一 践 而 就 。 
但 是 , 进行 API 调 用 通常 是 一 个 相当 底层 的 操作 , 那么 该 如 何 将 其 集成 到 更 大 的 应 用 程序 中 呢 ? 
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13.18 ”GraphQL 与 React 结合 使 用 


因为 本 书 全 都 是 关于 React 的 ， 所 以 是 时 候 将 GraphQL 与 React 集成 了 。 

使 用 GraphQL 和 React 最 有 发 展 前 景 的 方式 是 Relay ， 我 们 将 用 一 整 章 来 介绍 它 。Relay 将 
React/GraphQL 应 用 程序 的 许多 最 佳 实践 自动 化 ， 如 缓存 、 绥 存 清除 和 批 处 理 。 介 绍 Relay 如 何 实现 
这 些 功 能 的 机 制 是 一 个 很 艰巨 的 任务 ， 而 且 最 终 使 用 Relay 会 比 自己 编写 的 解决 方案 更 好 。 

但 是 在 现 有 的 应 用 程序 中 采用 Relay 可 能 会 遇 到 很 多 问题 ， 因 此 我 们 有 必要 讨论 一 些 将 GraphQL 
添加 到 现 有 的 React 应 用 程序 中 的 技术 。 

如 果 你 正在 使 用 Redux， 那 么 可 以 使 用 前 面 介 绍 的 fetch 技术 将 REST 或 其 他 API 调用 替换 为 
GraphQL 调用 。 虽 然 你 无 法 获得 Relay 或 其 他 特定 于 GraphQL 的 库 所 提供 的 共 置 查询 API, 但 GraphQL 
的 优点 〈 比如 开发 体验 和 可 测试 性 ) 仍 很 突出 。 

Relay 也 有 新 兴 的 替代 方案 Apollo。 它 是 包括 react-apollo 的 项 目 集合 。react-apollo 允许 
你 以 类 似 于 Relay 的 方式 来 放置 视图 及 其 GraphQL 查询 ， 但 它 使 用 的 是 Redux 在 后 台 存 储 GraphQL 
缓存 和 数据 。 下 面 是 一 个 简单 的 Apollo 组 件 的 例子 : 


class AboutGraphQLHub extends React.Component { 
render() { 
return <div>{ this.props.about.graphQLHub }¢/div»; 
} 
} 






















































































































































































const mapQueriesToProps = () => { 
return { 
about: { 
query: '{ graphQLHub }' 


}; 
过 


const ConnectedAboutGraphQLHub = connect({ 
mapQueriesToProps 
})(AboutGraphQLHub ) ; 


在 Redux 上 进行 构建 意味 着 你 可 以 更 容易 地 将 Apollo 集成 到 现 有 的 Redux store 中 ， 就 像 任何 其 
他 中 间 件 或 reducer 一 样 : 


import ApolloClient from 'apollo-client'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 











const client = new ApolloClient(); 


const store = createStore( 
combineReducers({ 
apollo: client.reducer(), 
// 其 他 reducer 
}), 





applyMiddleware(client.middleware()) 
后 


如 果 Apollo 看 起 来 适合 你 的 项 目 ， 可 以 在 Apollo Docs 网 站 查看 它 的 文档 。 


13.19 总结 


现在 你 已 编写 了 一 些 GraphQL 查询 , 了 解 了 它 的 不 同 特性 , 其 至 编写 了 一 些 代码 以 在 浏览 器 中 获 
取 GraphQL。 如 果 你 的 产品 已 有 了 一 个 GraphQL 服务 器 ， 那 么 继续 并 跳 到 第 15 章 即 可 ， 但 在 大 多 数 
情况 下 ， 你 还 是 要 设计 自己 的 GraphQL 服务 器 。 精 益 求 精 ! 









































GraphQL 服务 器 








14.1 编写 一 个 GraphQL 服务 器 


为 了 使 用 Relay 或 任何 其 他 GraphQL 库 , 你 需要 一 个 使 用 GraphQL 的 服务 絮 。 在 本 章 中 , 我 们 将 
使 用 Node.js 和 其 他 在 前 几 章 中 使 用 过 的 技术 来 编写 一 个 后 端的 GraphQL 服务 右 。 

之 所 以 使 用 Node， 是 因为 我 们 可 以 利用 React 生态 系统 中 其 他 地 方 使 用 的 工具 ， 并 且 Facebook 
的 许多 后 端 库 是 面向 Node 开发 的 。 然 而 ， 每 一 种 流行 的 编程 语言 都 有 GraphQL 服务 器 端 库 ， 例 如 
Ruby 、Python 和 Scala。 如 果 你 现 有 的 后 端 使 用 的 是 JavaScript 以 外 的 其 他 语言 框架 ( 例如 Rails )， 那 
么 以 当前 的 语言 研究 GraphQL 实现 也 是 有 意义 的 。 

本 章 介绍 的 内 容 (例如 如 何 设计 模式 以 及 如 何 使 用 现 有 SQL 数据 库 ) 适用 于 所 有 GraphQL 库 和 
语言 。 无 论 你 使 用 哪 种 语言 ， 我 们 都 鼓励 你 继续 阅读 本 章 ， 并 将 所 学 的 内 容 应 用 于 自己 的 项 目 中 。 

让 我 们 开始 吧 































































































































































































14.2 ”Windows 用 户 的 特殊 设置 

Windows 用 户 需 要 一 些 额外 的 设置 来 安装 本 章 的 包 。 具 体 来 说 ， 就 是 我 们 使 用 的 sql ite3 包 很 难 
安装 在 某 些 Windows 版 本 上 。 

安装 windows-build-tools 

windows-build-tools 人 允许 你 编译 原生 的 Node 模块 ， 这 是 sqlite3 包 所 必需 的 。 


安装 好 Node 和 npm 后 ， 全 局 安装 windows-build-tools: 




































































npm _ install --global --production windows-build-tools 

将 python 添加 到 PATH 中 

安装 完 windows-build-tools 之 后 ， 你 需要 确保 python 在 你 的 PATH 中 。 这 意味 着 在 终端 
入 python 并 按 回 车 键 会 调用 Python 。 


这 里 使 用 windows-buil1d-tools 安装 Python: 














键 





























C:NXYour User>\.windows-bui1d-toolsNpython27 
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Python 附带 了 一 个 脚本 ， 可 以 将 自己 添加 到 PATH 中 。 在 PowerShell 中 运行 该 脚本 : 


> $env:UserProfile\.windows-build-tools\python27\scripts\win_add2path.py 








如 果 遇 到 找 不 到 此 脚本 的 错误 ， 请 在 C:\<Your User>\.windows-build-tools 目 
录 中 验证 上 述 Python 的 版 本 号 是 否 正确 。 
运行 此 命令 后 ， 必 须 重启 计算 机 ， 不 过 有 时 候 重 启 PowerShell 就 可 以 了 。 无 论 什 么 时 候 ， 你 都 可 
以 通过 在 终端 中 调用 python 命令 来 验证 Python 是 否 正 确 安装 。 在 执行 此 命令 后 应 该 会 启动 一 个 
Python 控制 台 : 


> python 


14.2.1 游戏 计划 
概括 来 说 ， 我 们 将 要 做 的 是 以 下 几 件 事情 : 
@ 创建 Express HTTP 服务 器 ; 
添加 接收 GraphQL 请 求 的 端点 ; 
构建 GraphQL 模式 ; 
e@ 编写 可 解析 模式 中 每 个 GraphQL 字段 数据 的 黏合 代码 ; 
e@ 支持 GraphiQL， 以 便 快 速 调试 和 人 迭代。 
我 们 要 构建 的 模式 是 针对 社交 网 络 的 ， 类 似 于 “Facebook 的 精简 版 "， 并 由 SQLite 数据 库 支 持 。 
这 样 可 以 展示 通用 的 GraphQL 模式 和 技术 , 以 便 有 效 地 设计 与 现 有 数据 存储 交互 的 GraphQL 服务 器 。 


14.2.2 Express HTTP 服 务 器 
让 我 们 开始 设置 Web 服务 器 。 创 建 一 个 新 目录 ， 并 命名 为 graphql-server ， 然 后 运行 一 些 初 始 


npm 命令 : 















































$ mkdir graphql-server 

$ cd ./graphql-server 

$ npm init 

井 按 下 回 车 键 ， 接 受 默认 设置 

$ npm install babel-register@6.3.13 babel-preset-es2015@6.3.13 express@4.13.3 --save\ 
—-Save-exact 

$ echo '{ "presets": ["es2015"] }' > .babelrc 


下 面 来 看 发 生 了 什么 。 我 们 创建 了 一 个 名 为 graphql-server 的 新 文件 来， 然后 进入 其 中 ; 接着 
运行 npm in 让 ， 该 命令 创建 了 一 个 package. json 文件 ; 之 后 安装 了 一 些 依赖 项 : Babel 和 Express。 
在 前 面 的 章节 中 你 应 该 很 熟悉 Babel 这 个 名 称 , 在 本 例 中 , 我 们 安装 了 babel-register 来 编译 Node. js 
文件 ， 以 及 babe1l-preset-es2015 来 指示 Babel 如 何 编译 这 些 文件 。 最 后 的 命令 创建 了 一 个 名 
为 .babelrc 的 文件 ， 该 文件 配置 了 Babel 来 使 用 babel-preset-es2815 包 。 


创建 一 个 新 文件 ， 命 名 为 index.js。 然 后 打开 它 ， 并 添加 以 下 几 行 代码 : 


require('babel-register'); 
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require('./server'); 

这 里 没什么 代码 ， 但 很 重要 。 通 过 引入 babel-register ， 后 续 每 个 对 require ( 当 使 用 ES2015 
时 是 import ) 的 调用 都 将 通过 Babel 的 转译 器 。Babel 将 根据 .babelrc 中 的 设置 来 转译 文件 ， 我 们 将 
其 配置 为 使 用 es2615 设置 。 

下 一 个 操作 是 创建 一 个 名 为 server .js 的 新 文件 。 打 开 它 并 快速 添加 一 行 代码 以 调试 我 们 的 代码 
能 否 正常 工作 : 

console.log({ starting: true }); 

如 果 你 运行 node index.js 命令， 应 该 能 看 到 如 下 输出 : 


$ node index. js 
{ starting: true } 


这 是 一 个 美好 的 开始 ! 下 面 添加 一 些 HITP。 


Express 是 一 个 非常 强大 且 可 扩展 的 HITP 框架 , 因此 我 们 不 会 太 深入 讨论 。 如 果 想 了 解 更 多 有 关 
Express 的 信息 ， 请 到 Express 网 站 查看 其 文档 。 


再 次 打开 server . js， 并 添加 Express 的 配置 代码 : 


console.log({ starting: true }); 


































































































import express from 'express'; 
const app = express(); 


app.use('/graphql', (req, res) => { 
res.send({ data: true }); 


> 


app.listen(3000，() => { 
console.log({ running: true }); 
}); 

前 几 行 代码 很 简单 一 一 导入 express 包 并 创建 一 个 新 实例 ( 你 可 以 将 其 视 为 创建 一 个 新 服务 器 )。 
在 文件 的 末尾 ， 我 们 告诉 服务 器 开始 监听 3660 端口 上 的 流量 ， 并 在 这 之 后 显示 一 些 输 出 。 

但 是 在 启动 服务 器 之 前 , 我 们 需要 告诉 它 如 何 处 理 不 同类 型 的 请 求 。 我 们 今天 将 使 用 app .use 来 
实现 这 一 点 。 它 的 第 一 个 参数 是 要 处 理 的 路 径 , 第 二 个 参数 是 处 理子 数 。 req 和 es 分 别 是 “request” 
和 “response” 的 缩写 。 默 认 情 况 下 , 在 app.use 中 注册 的 路 径 将 对 所 有 的 HTTP 方法 做 出 响应 ， 所 
以 现在 GET /graphql 和 POST /graphql 执行 的 是 相同 的 操作 。 

让 我 们 尝试 一 下 。 再 次 使 用 node index. js 命令 来 运行 服务 器 ， 并 在 一 个 单独 的 终端 中 运行 一 个 
cURL 命令 : 

























































































$ node index.js 
{ starting: true } 
{ running: true } 
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$ curl -XPOST http://localhost:3000/graphql 
{"data":true} 
$ curl -XGET http://localhost:3000/graphql 
{"date":true} 


我 们 有 一 个 正常 工作 的 HTTP 服务 器 了 ! 现在 ， 是 时 候 “ 执 行 一 些 GraphQL” 了 。 
2 厌倦 了 每 次 更 改 后 需要 重启 服务 器 吗 ? 你 可 以 设置 一 个 像 Nodemon 这 样 的 工具 , 它 


可 以 在 你 编辑 后 自动 重启 服务 器 ， 而 且 只 需要 执行 npm install -g nodemon && 
nodemon index.js 命令 就 可 以 了 。 





14.2.3 ”添加 第 一 个 GraphQL 类 型 
我 们 需要 安装 一 些 GraphQL 库 。 如 果 你 的 服务 器 正在 运行 ， 请 停止 它 ， 然 后 运行 以 下 命令 : 


$ npm install graphql60.6.0 express-graphql60.5.3 --save --save-exact 

两 者 的 名 称 中 都 有 “GraphQL”， 因 此 听 起 来 很 有 发 展 前 景 。 这 两 个 库 是 Facebook 维护 的 ， 同 时 
也 可 以 作为 其 他 语言 的 GraphQL 库 的 参考 实现 。 

graphql 库 公 开 了 让 我 们 构造 模式 的 API， 并 公开 了 针对 该 模式 来 解析 原生 GraphQL 文档 字符 串 
的 API。 它 可 用 于 任何 JavaScript 应 用 程序 ,无论 是 像 本 例 中 的 Express Web 服务 器 ,还 是 像 Koa 这 样 
的 其 他 服务 器 ， 其 至 是 浏览 占 本 身 。 

相 比 之 下 ，express-graphql 包 只 适用 于 Express。 它 可 以 确保 为 GraphQL 正确 设置 HTTP 请 求 
和 响应 的 格式 〈 例 如 处 理 content-type 标 头 ), 并 最 终 让 我 们 能 以 很 少 的 额外 工作 来 支持 GraphiQL。 

让 我 们 开始 吧 。 打 开 server. js， 在 创建 好 app 实例 后 添加 以 下 代码 : 


const app = express(); 



























































import graphqlHTTP from 'express-graphql ' ， 
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql'; 


const RootQuery = new GraphQLObjectType({ 
name: 'RootQuery', 
description: 'The root query', 
fields: { 
viewer: { 
type: GraphQLString， 
resolve() { 
return 'viewer!'; 


}); 

const Schema = new GraphQLSchema({ 
query: RootQuery 

上 


app.use('/graphql', graphqlHTTP({ schema: Schema })); 
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注意 ， 我 们 已 将 之 前 的 参数 更 改 为 app.use(〈 它 将 蔡 换 之 前 的 app.use )。 

这 里 有 很 多 有 趣 的 东西 ， 但 我 们 先 跳 到 最 重要 的 部 分 。 启 动 你 的 服务 器 (node index.js ) 并 运 
行 下 面 这 个 cURL 命令 : 

$ curl -XPOST -H 'content-type:application/graphql' http://localhost:3000/graphgql -d\ 


'{ viewer }' 
{"data":{"viewer":"viewer!"}} 


如 果 看 到 以 上 输出 , 则 说 明 服 务 器 配置 正 古 
了 解 它 的 实际 工作 原理 。 
首先 从 GraphQL 库 中 导入 了 一 些 依赖 项 : 


import graphqlHTTP from 'express-graphql'; 
import { GraphQLSchema，GraphQLObjectType，GraphQLString } from 'graphql'; 


graphql 库 导 出 了 许多 对 象 ， 随 着 我 们 编写 更 多 的 代码 ， 你 会 慢 慢 熟悉 它们 。 使 用 的 前 两 个 对 象 
是 GraphQLObjectType 和 GraphQLString : 









































已 相应 地 解析 了 GraphQL 请 求 。 下 面 让 我 们 逐步 


Ey 
He 









































const RootQuery = new GraphQLObjectType({ 
name: 'RootQuery', 
description: 'The root query', 
fields: { 
viewer: { 
type: GraphQLString， 
resolve() { 
return 'viewer!'; 


} 
} 
} 

下 

创建 GraphQLObjectType 的 新 实例 时 ,类 似 于 定义 一 个 新 类 。 我 们 需要 给 它 一 个 名 称 ， 并 设置 一 
个 description (可 选 的 ， 但 对 文档 很 有 帮助 )。 

name 字段 用 于 设置 GraphQL 模式 中 的 类 型 名 称 。 例 如 ， 如 果 想 在 这 个 类 型 上 定义 一 个 片段 ， 我 
们 可 以 在 查询 中 编写 “. . .on RootQuery”。 如 果 我 们 将 name 更 改 为 类 似 AwesomeRootQuery 之 类 的 
名 称 ， 那 么 需要 将 片段 更 改 为 “... on AwesomeRootQuery”， 即 使 JavaScript 变量 仍 是 RootQuery。 

定义 了 类 型 之 后 , 下 面 我 们 需要 给 它 一 些 字段 。fields 对 象 中 的 每 个 键 都 定义 了 一 个 新 的 对 应 字 
段 ， 并 且 每 个 字段 对 象 都 有 一 些 必需 的 属性 。 
我 们 需要 给 字段 赋予 如 下 属性 。 
e@ type: GraphQL 库 导 出 的 基本 标量 类 型 ， 例 如 GraphQLString。 
@ resolve: 该 函数 用 于 返回 字段 的 值 。 目 前 ， 我 们 对 返回 值 进行 了 硬 编码 ， 即 'viewer! '。 
接 下 来 创建 一 个 GraphQLSchema 实例 : 


const Schema = new GraphQLSchema({ 
query: RootQuery 
}); 
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希望 该 命名 能 够 清楚 地 表明 这 是 顶级 的 GraphQL 对 象 。 

你 只 有 在 拥有 模式 实例 之 后 才能 解析 查询 ， 而 不 能 自行 根据 对 象 类 型 解析 查询 字符 串 。 

模式 有 两 个 属性 : query 和 mutation。 它们 对 应 于 前 面 讨论 的 两 种 类 型 的 操作 。 这 两 个 都 会 采用 
GraphQL 类 型 的 实例 ， 但 现在 我 们 只 将 query 设置 为 RootQuery 类 型 。 

关于 命名 ( 计算 机 科学 的 难题 之 一 ) 的 一 个 简短 说 明 : 我 们 通常 将 模式 的 顶层 查询 称 为 根 。 你 将 
看 到 许多 具有 类 似 RootQuery 类 型 命名 的 项 目 。 

最 后 将 其 全 部 连接 到 Express: 

app.use('/graphql', graphqlHTTP({ schema: Schema })); 

graphqlHTTP 函数 将 使 用 schema 生成 一 个 函数 ， 而 不 是 手动 编写 一 个 处 理 函 数 。 在 内 部 ， 它 会 
从 请 求 中 获取 GraphQL 查询 ， 并 将 其 传递 给 主 GraphQL 库 的 解析 函数 。 
14.2.4 添加 GraphiQL 

之 前 我 们 使 用 了 GraphQLHub 托管 的 GraphiQL 实例 ， 即 GraphQL IDE。 如 果 我 告诉 你 ， 只 需 一 
次 修改 就 可 以 将 GraphiQL 添加 到 小 型 GraphQL 服务 器 中 ， 你 会 不 会 感到 惊讶 ? 

尝试 将 graphiql: true 选项 添加 到 graphqlHTTP 中 : 





















































app.use('/graphql', graphqlHTTP({ schema: Schema, graphiql: true })); 


重启 服务 器 并 切换 到 Chrome, 然后 打开 http://1ocalhost:3800/graphql。 你 应 该 会 看 到 图 14-1 
中 的 内 容 。 











GraphiQL Pp Prettify 《 Docs 





图 14-1 空 的 GraphiQL 


如 果 你 打开 “Docs” 侧 边栏 ， 就 可 以 看 到 我 们 输入 的 关于 模式 的 所 有 信息 
描述 和 它 的 viewer 字段 ， 见 图 14-2。 








RootQuery 类 型 、 
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《 Schema RootQuery x 


The root query 
FIELDS 


Viewer: String 














图 14-2 服务 器 文档 
你 还 可 以 自动 补 全 字段 ， 见 图 14-3。 


lf 
2 | yy 
CT 


String Self descriptive. 














14-3 ”服务 器 端 自动 填充 功能 











我 们 通过 使 用 graphql-express 库 免 费 获 得 了 所 有 这 些 好 处 。 


2 如 果 你 使 用 的 是 其 他 JavaScript 框 架 或 完全 不 同 的 语言 ， 那 么 也 可 以 设置 GraphiQL， 
请 阅读 GraphiQL 的 文档 "来 了 解 详细 信息 。 





你 会 注意 到 ， 类 型 输入 提示 显示 了 一 些 有 趣 的 字段 ， 比 如 _schema ， 即 使 我 们 没有 定义 过 。 这 便 
是 我 们 在 整个 章节 中 都 提 到 过 的 GraphQL 的 内 省 功能 ， 见 图 14-4。 


J 
2 | 动 
3 }__type 


_Schemal Access the current type schema of this 
Sserver. 





图 14-4 ”服务 器 端 内 省 功能 
让 我 们 继续 深入 研究 一 下 。 


14.2.5 ”内 省 


继续 并 在 服务 器 的 GraphiQL 实例 中 运行 此 GraphQL 查询 : 
{ 
_schema { 
queryType { 


参见 GitHub 网 站 的 graphql/graphiql 页 面 











o 
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name 
fields { 
name 
type { 
name 


} 
} 
} 
} 


_ schema 是 一 个 “元 ”字段 ， 自动 存在 于 每 个 GraphQL 的 根 查询 操作 中 。 它 有 一 个 完整 的 树 形 
构 的 类 型 及 字段 ， 你 可 以 在 GraphQL 的 内 省 规范 中 阅读 这 些 内 容 。GraphiQL 的 自动 补 全 功能 还 会 
你 提供 有 用 的 信息 ， 并 证 你 探索 _schema 和 其 他 内 省 字段 ( 如 _type ) 的 可 能 性 。 
运行 该 查询 后 ， 你 将 获得 一 些 数据 ， 如 下 所 示 : 





发 











、 


为 














{ 
"data": { 
"__schema": { 
"queryType": { 
"name": "RootQuery", 
"fields": [ 
{ 
"name": "viewer", 
"type": { 
"name": "String" 
} 
} 
] 
} 
j 
} 
} 














这 本 质 上 是 服务 器 模式 的 JSON 描述 。 这 是 GraphiQL 通过 在 IDE 启动 时 发 出 内 省 查询 来 填充 其 
文档 并 实现 自动 补 全 的 方式 。 由 于 每 个 GraphQL 服务 器 都 被 要 求 支持 内 省 , 因此 工具 通常 可 以 跨 所 有 
的 GraphQL 服务 器 进行 移植 (无论 使 用 哪 种 语言 或 库 来 实现 )。 

在 本 章 中 ， 我 们 不 会 对 内 省 做 其 他 任何 事情 ， 但 最 好 知道 它 的 存在 以 及 工作 方式 。 




















14.2.6 ”变更 
目前 已 设置 了 模式 的 根 查 询 ， 但 我 们 提 到 过 还 可 以 设置 根 变 更 。 记 得 之 前 说 过 变更 是 GraphQL 
中 发 生 “ 写 ”行为 的 正确 位 置 一 一 无 论 何 时 当 你 要 添加 、 修 改 或 删除 数据 ， 都 应 该 通过 变更 操作 来 进 
行 。 我 们 将 看 到 ， 除 了 隐 式 约定 ( 即 不 应 该 在 查询 中 进行 写 操作 ) 之 外 ， 变 更 与 查询 的 差别 非常 小 。 
为 了 演示 变更 操作 ， 我 们 将 创建 一 个 简单 的 API 来 获取 和 设置 内 存 中 的 node 对 象 ， 类 似 于 之 前 
描述 的 惯用 的 Node 模式 。 现 在 不 会 返回 实现 了 Node 接口 的 对 象 ， 而 是 返回 节点 的 字符 串 。 
首先 ， 从 GraphQL 库 中 导入 一 些 新 的 依赖 项 : 
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import { GraphQLSchema，GraphQLObjectType，GraphQLString， 
GraphQLNonNull, GraphQLID } from 'graphql'; 











GraphQLID 是 JavaScript 模拟 的 ID 标量 类 型 , 而 GraphQLNonNul1 尚未 介绍 。 事实 证 明 , GraphQL 
的 类 型 系统 不 仅 会 跟踪 字段 的 类 型 和 接口 ， 而 且 还 会 跟踪 它们 是 否 可 以 为 空 。 这 对 于 字段 参数 来 说 万 


为 方便 ， 稍 后 会 介绍 。 





类 下 


一 














接 下 来 需要 为 变更 操作 创建 一 个 类 型 考虑 一 下 代码 应 该 是 什么 样子 的 ,因为 它 应 该 与 RootQuery 
型 非常 相似 。 那 么 到 底 需 要 什么 样 的 调用 和 属性 呢 ? 








在 考虑 过 之 后 ， 将 它 与 实际 的 实现 进行 比较 : 


let inMemoryStore = {}; 


const RootMutation = new GraphQLObjectType({ 


name: "RootMutation '， 
description: 'The root mutation', 
fields: { 
setNode: { 
type: GraphQLString， 
args: { 
id: { 


type: new GraphQLNonNull(GraphQLID) 


}, 


value: { 


type: new GraphQLNonNull(GraphQLString), 


} 
二 
resolve(source, args) { 

inMemoryStore[args.key] = args 

return inMemoryStore[args.key] 
} 
} 
} 
}); 


.Value; 


a 





在 最 顶部 ， 我 们 为 节点 初始 化 了 一 个 “存储 ”"。 它 只 会 存在 于 内 存 中 ， 因 此 ， 每 当 你 重启 服务 器 
时 ,数据 都 会 被 清除 一 一 但 你 可 以 假设 这 是 一 个 键 值 服务 ,就 像 Redis 或 Memcached。 亿 建 craphQL- 
ObjectType 的 实例 ,设置 name 、description 和 fields 看 起 来 应 该 都 很 熟悉 。 


这 里 的 一 个 新 事项 是 使 用 args 属性 来 处 理 字段 参数 。 与 我 们 使 用 fields 属性 设置 字段 名 的 方式 














类 似 ，args 对 象 的 键 是 字段 允许 的 参数 名 。 























我 们 指定 了 每 个 参数 的 类 型 ， 并 将 其 包装 为 GraphQLNonNul1 的 实例 。 这 意味 着 查询 必须 为 每 个 








my Sp 


$ 字段 参数 的 对 象 ( 稍 后 会 讨论 其 源 代码 )。 

















数 指定 一 个 非 空 值 。resolve 函数 考虑 到 了 这 一 点 ， 它 接收 传人 的 几 个 参数 ， 其 中 第 二 个 参数 是 包 








当 我 们 在 inMemoryStore 中 设置 了 一 个 值 时 ,这 就 是 变更 的 “ 写 ” 操 作 。 我们 还 在 resolve 也 数 
中 返回 了 一 个 值 ， 以 配合 setNode 字段 的 类 型 





I。 在 本 例 中 ， 它 刚好 是 一 个 string 类 型 ， 但 是 你 可 以 


假设 它 是 一 个 复杂 类 型 ， 比 如 User 或 定制 的 某 个 变更 操作 。 





现在 有 了 变更 类 型 ， 把 它 添加 到 模式 中 : 


14.2 
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const Schema = new GraphQLSchema({ 
query: RootQuery ， 
mutation: 


}); 


RootMutation, 
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还 剩 最 后 一 点 整理 工作 ， 我 们 将 继续 添加 一 个 node 字段 到 查询 中 


fields: { 
viewer: { 
type: GraphQLString， 
resolve() { 


return 'viewer!'; 


} 
ly 
node: { 
type: GraphQLString， 
args: { 
id: { 


type: new GraphQLNonNull(GraphQLID) 


} 
} 


resolve(source, args) { 
return inMemoryStore[args.key]; 
} 


} 
} 





重启 服务 器 ， 并 在 GraphiQL 中 运行 此 查询 : 
mutation { 
setNode(id: 


ia 
} 


,， value: "a value!") 


























{ 
"data": { 
"node": "a value!" 
} 
} 
然后 可 以 通过 运行 一 个 新 的 查询 来 确认 该 变更 已 起 作用 : 
query { 
node(id: "id") 
} 


变更 在 概念 上 并 不 复杂 ， 大 多 数 应 用 程序 最 终 需 要 它们 将 数据 写 
格 的 模式 来 定义 变更 ,适当 的 时 候 


会 介绍 O 
这 个 变更 操 





J1 





注意 , 必须 显 式 声 明 变 更 操作 类 型 , 否则 GraphQL 会 假定 它 是 一 个 查询 操作 。 运行 该 变更 应 返回 
一 个 新 值 : 








回 服务 器 。Relay 有 一 个 稍微 严 14 


操作 改变 了 内 存 中 的 数据 结构 ， 但 大 多 数 产 品 的 数据 保存 在 Postgres 或 MySQL 等 数据 
存储 中 。 现 在 是 时 候 探索 该 如 何 使 用 这 些 环境 了 
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14.2.7 ”丰富 的 模式 和 SQL 


























如 前 所 述 ， 我 们 将 使 用 SQLite 模拟 构建 一 个 小 型 的 Facebook。 并 将 展示 如 何 与 数据 库 通 信 ， 如 














何 处 理 授权 和 权限 ， 以 及 一 些 使 其 平稳 运行 的 性 能 技巧 。 











在 深入 研究 代码 之 前 ， 先 来 看 看 数据 库 是 什么 样 的 。 
一 个 具有 id 、name 和 about 列 的 users 表 。 
一 个 具有 user_id_a、user_id_b 和 1evel 列 的 users_friends 表 。 
一 个 具有 body、user_id、level 和 created_at 列 的 posts 表 。 


level 列 将 用 于 表示 友情 链接 和 帖子 的 分 层 “ 隐 私 ” 设 置 。 可 使 用 的 级 别 有 top、friend、 



























































acquaintance 和 public。 如 果 一 个 帖子 有 一 个 acquaintance 级 别 ， 那 么 只 有 拥有 相同 级 别 或 “更 


i 


局 





























”级 别 的 朋友 才能 看 到 它 。 任 何 用 户 都 可 以 看 到 public 级 别 的 帖子 ， 即 使 他 不 是 朋友 。 











为 了 在 Nodejjs 中 实现 这 一 点 ， 我 们 将 使 用 node-sql 包 和 sqlite3 包 。 在 Node.js 中 使 用 数据 库 




















时 有 许多 选择 ， 不 过 在 生产 中 使 用 任何 关键 库 之 前 ， 我 们 都 应 该 自行 做 好 研究 工作 ,但 这 两 个 包 应 该 
足以 满足 我 们 的 学 习 。 


14.2.8 设置 数据 库 


项 。 




















是 时 候 安装 更 多 库 了 ! 运行 如 下 命令 来 将 它们 添加 到 项 目 中 : 
$ npm install sqlite@0.0.4 sqlite3@3.1.3 --save --save-exact 
$ mkdir src 


最 后 需要 三 个 文件 。 在 macOS 或 Linux 上 可 以 运行 如 下 命令 : 

$ touch src/tables.js src/database.js src/seedData .js 

Windows 用 户 可 以 随时 创建 它们 。 

下 面 创建 一 个 数据 库 。SQLite 数据 库存 在 于 文件 中 ， 因 此 无 须 启动 单独 的 进程 或 安装 更 多 的 依赖 
为 了 便于 阅读 ， 我 们 将 开始 把 代码 分 割 成 多 个 文件 ， 即 用 touch 创建 的 文件 集 。 

首先 定义 表 ， 它 的 语句 非常 容易 理解 ， 你 也 可 以 阅读 node-sql 的 文档 以 获得 更 详细 的 信息 。 打 





















































开 tables.js 并 添加 以 下 定义 : 


import sql from "Sql 
sql .setDialect('sqlite' ) ; 


export const users = sql.define({ 
name: "Users ' ， 
columns: [{ 
name: 'id', 
dataType: 'INTEGER', 
primaryKey: true 
下 元 进 
name: 'name', 
dataType: "七 ext 
PA 
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name: "about ' ， 
dataType: "七 exXt 
}] 
}); 


export const usersFriends = sql.define({ 
name: 'users_friends', 
columns: [{ 
name: 'user_id_a', 
dataType: "int '， 
| 
name: 'user_id_b', 
dataType: ‘int', 
1 
name: 'level', 
dataType: 'text', 
}] 
}); 


export const posts = sql.define({ 

name: 'posts', 

columns: [{ 

name: 'id', 

dataType: 'INTEGER', 
primaryKey: true 
| 
name: "User_id ' ， 
dataType: "int 
name: 'body', 
taType: “七 eXt 





taType: 'text' 


name: 'created_at', 


taType: 'datetime' 








{ 

a 

a 

{ 
name: 'level', 
a 

{ 

a 

a 


}] 
> 

node-sql 允许 我 们 使 用 JavaScript 对 象 来 设计 和 操作 SQL 查询 ， 类 似 于 GraphQL JavaScript 库 使 
我 们 能 够 使 用 GraphQL 的 方式 。 在 这 个 特定 的 文件 中 还 未 “发 生 ” 任 何事 情 , 但 我 们 将 很 快 使 用 它 导 
出 的 对 象 。 

现在 需要 创建 数据 库 并 向 其 中 加 载 一 些 数据 ,在 graphql-server/src 目录 中 包含 本 课程 的 资料 ， 
其 中 有 一 个 data. json 文件 , 继续 并 将 其 复制 到 正在 进行 的 项 目的 src 目录 中 。 你 也 可 以 使 用 自己 的 
数据 ， 但 是 我 们 讨论 的 示例 将 假设 你 正在 使 用 的 是 课程 包含 的 数据 文件 。 

要 将 数据 从 data. json 复制 到 数据 库 中 ， 我 们 需要 编写 一 些 代码 。 首 先 打 开 src/database. js 
并 定义 一 些 简单 的 导出 : 
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import sqlite3 from 'sqlite3'; 
import * as tables from './tables'; 
export const db = new sqlite3.Database('./db.sqlite'); 


export const getSql = (query) => { 
return new Promise((resolve, reject) => { 
console.1og(query .text ) ; 
console.1og(query.values ) ; 
db.all(query.text, query.values, (err, rows) => { 
if (err) { 
Teject(err ) ; 
} else { 
Tesolve(Trows ) ; 
} 
上 
}); 


首先 定义 数据 库 文件 并 将 其 导出 ， 以 便 其 他 代码 可 以 使 用 。 我 们 还 导出 了 一 个 getSql 函数 ， 它 






































将 以 异步 promise 的 方式 运行 查询 。GraphQL JS 库 使 用 promise 来 处 理 异步 解析 ， 我 们 很 快 就 会 进行 




















利用 。 








然后 打开 之 前 创建 的 src/seedData. js 文件 ， 并 添加 以 下 这 个 createDatabase 函数 : 


import * as data from './data'; 
import * as tables from './tables'; 
import * as database from './database'; 


const sequencePromises = function (promises) { 
return promises.reduce((promise, promiseFunction) => { 
return promise.then(() => { 
return promiseFunction(); 


}); 
}, Promise.resolve()); 
}; 
const createDatabase = () => { 
let promises = [tables.users, tables.usersFriends, tables.posts] .map((table) => { 
return () => database.getSql(table.create().toQuery()); 
}); 


return sequencePromises(promises); 


下 
回想 一 下 , tables .js 的 导出 是 一 些 由 node-sql 创建 的 对 象 。 当 我 们 想 要 使 用 node-sql 创建 一 














个 数据 库 查 询 时 ， 可 以 使 用 .toQuery( ) 函数 ， 然 后 将 它 作 为 参数 传递 到 我 们 刚刚 在 database.js 中 
编写 的 getSql 函数 中 。 简 单 来 说 ,新 的 createDatabase 函数 将 运行 创建 每 个 表 的 查询 。 需 要 对 promise 
进行 排序 ， 以 确保 在 继续 promise 链 中 的 任何 后 续 步 又 之 前 创建 好 所 有 表 。 





























设置 好 表 之 后 ， 需 要 从 data. json 中 添加 数据 。 接 下 来 编写 这 个 新 的 insertData 水 数 : 
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const insertData = () => { 
let { users, posts, usersFriends } = data; 


let queries = [ 
tables.users.insert(users).toQuery(), 
tables.posts.insert(posts).toQuery(), 
tables.usersFriends.insert(usersFriends).toQuery(), 


| 


let promises = queries.map((query) => { 
return () => database.getSql(query); 
es 


return sequencePromises(promises); 
I 
与 createDatabase Re 我 们 使 用 toQuery 创建 查询 ， 然 后 使 用 getSql 进行 执行 。 最 后 ， 通 
过 调用 以 下 两 个 函数 ， 将 它们 都 连接 在 一 起 : 


createDatabase().then(() => { 
return insertData(); 


}).then(() => { 


console.log({ done: true }); 


}); 
可 以 调用 shel1 命令 来 运行 这 段 代码 : 


$ node -e 'require("babel-register"); require("./src/seedData");' 
{ done: true } 


现在 项 目的 顶级 目录 下 应 该 有 了 一 个 db .sqlite 文件 ! 可 以 使 用 许多 图 形 工具 来 探索 SQLite 数 
据 库 ， 如 DBeaver， 或 者 可 以 通过 以 下 一 行 命令 来 验证 它 是 否 包含 某 些 数据 : 


$ sqlite3 ./db.sqlite "select count(*) from users" 
5 


现在 是 时 候 将 GraphQL 模式 连接 到 新 创建 的 数据 库 了 。 


14.2.9 模式 设计 


在 前 面 的 示例 中 ，GraphQL 模式 中 的 resolve 函数 只 会 返回 常量 或 内 存 中 的 值 , 但 是 现在 它们 需 
要 从 数据 库 返 回 数据 。 我 们 还 需要 为 users 和 posts 表 提 供 相 应 的 GraphQL 类 型 ， 并 将 相应 的 字段 
添加 到 原始 的 根 查询 中 。 

在 深入 人 研究 代码 之 前 ， 应 该 花 一 点 时 间 来 思考 一 下 最 终 的 GraphQL 查询 是 什么 样 的 。 通 常 ， 从 
viewer 开始 是 一 个 好 习惯 ， 因 为 大 多 数 数据 会 流 经 该 字段 。 

在 本 例 中 ，viewer 将 是 当前 用 户 。 用 户 具有 friends 字段 ， 因 此 我 们 需要 一 个 好 友 列 表 ， 以 及 
该 用 户 所 写 帖子 的 连接 。viewer 还 有 一 个 newsfeed 字段 ， 它 是 到 其 他 用 户 所 写 帖 子 的 连接 。 我 们 和 希 
望 所 有 这 些 连 接 都 是 惯用 的 GraphQL， 并 包括 适当 的 分 页 等 功能 ,以 防止 整个 新 闻 消息 或 好 友 列 表 太 
长 而 无 法 计算 或 者 无 法 在 一 个 响应 中 完成 发 送 。 
基于 以 上 所 有 这 些 信息 ， 我 们 希望 viewer 的 查询 如 下 所 示 : 
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{ 
viewer { 
friends { 
# 为 Users 连接 字段 
} 


posts { 

# 为 Posts 连接 字段 
} 
newsfeed { 

# 为 Posts 连接 字段 
} 


] 
} 


请 记 住 ,根据 惯用 的 GraphQL， 我 们 希望 所 有 对 象 也 都 是 图 中 的 节点 。 最 终 ， 考 虑 到 给 定 帖 子 的 
作者 和 viewer 之 间 的 友好 级 别 ，newsfeed 中 返回 的 所 有 数据 都 需要 考虑 授权 。 
应 该 添加 对 使 用 顶级 node(id: ) 字 段 获取 任意 节点 的 查询 的 支持 ， 如 下 所 示 : 

















node(id: "123") { 
. on User { 
friends { 
# 好 友 列 表 
} 
} 


. on Post { 
author { 
posts { 
# 连接 字段 

















如 前 所 述 ,在 不 知道 节点 在 层次 结构 中 的 位 置 的 情况 下 ， 这 个 字段 对 于 帮助 前 端 代码 重新 获取 节 
点 的 当前 状态 非常 有 用 。 

这 可 能 会 邻 人 惊讶 ， 但 GraphQL 约定 是 从 同一 顶级 node 字段 中 获取 许多 不 同类 型 的 对 象 。SQL 
数据 库 通 常 为 每 种 类 型 而 使 用 不 同 的 表 , REST API 会 为 每 种 类 型 使 用 不 同 的 端点 , 但 惯用 的 GraphQL 
会 以 相同 的 方式 获取 所 有 对 象 ， 只 要 你 拥有 一 个 标识 符 。 这 也 意味 着 ID 必须 是 全 局 唯一 的 ， 否 则 


3 


GraphQL 服务 器 无 法 区 分 id: 1 的 User 类 型 和 id: 1 的 Post 类 型 。 


14.2.10 ”对 象 和 标量 类 型 
为 了 使 这 些 查 询 成 为 可 能 ， 我 们 将 创建 一 个 名 为 src/types .js 的 新 文件 来 保存 这 些 类 型 。 
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需要 定义 的 第 一 个 类 型 是 Node 接口 。 回 想 一 下 ， 要 使 类 型 成 为 有 效 的 Node ， 它 需要 具有 一 个 全 
局 唯一 的 id 字段 。 要 在 JavaScript 中 实现 该 功能 ， 我 们 首先 需要 导入 一 些 API 并 创建 一 
GraphQLInterfaceType 实例 : 




















import { 
GraphQLInterfaceType， 
GraphQLObjectType ， 
GraphQLID ， 
GraphQLString， 
GraphQLNonNu11, 
GraphQLList, 

} from 'graphql'; 


import * as tables from './tables'; 


export const NodeInterface = new GraphQLInterfaceType({ 
name: 'Node', 
fields: { 
id: { 
type: new GraphQLNonNull(GraphQLID) 
} 


除了 使 用 一 个 新 类 外 ， 我 们 创建 GraphQLObjectType 实例 的 方式 看 起 来 都 很 熟悉 。 注 意 ，id 字 
段 没 有 resolve 函数 。 接 口中 的 字段 不 会 有 默认 的 resolve 实现 , 即使 我 们 提供 了 一 个 , 也 将 被 忽略 。 
相反 ， 实 现 了 Node 接口 的 每 个 对 象 类 型 都 应 该 定义 自己 的 resolve 函数 ( 稍 后 将 讨论 )。 


除了 定义 fields 外 ，GraphQLInterfaceType 实例 还 必须 定义 resolveType 函数 。 请 记 住 ， 顶 
级 node(id:) 字 段 只 保证 返回 某 种 类 型 的 Node ， 而 不 保证 返回 某 种 特定 类 型 。 为 了 让 GraphQL 做 进 
一 步 的 解析 〈 例如 使 用 部 分 片段 ， 即 . . .on User )， 我 们 需要 将 特定 对 象 的 具体 类 型 告知 GraphQL 


引擎 。 
可 以 这 样 实现 : 


export const NodeInterface = new GraphQLInterfaceType({ 
name: 'Node', 
fields: { 
id: { 
type: new GraphQLNonNull(GraphQLID) 
} 
} 
resolveType: (source) => { 
if (source._ tableName === tables.users.getName()) { 
return UserType; 
} 
return PostType; 
} 
}); 


resolveType 函数 将 原始 数据 作为 它 的 第 一 个 参数 ( 在 本 例 中 , source 是 直接 从 数据 库 返 回 的 数 
据 )， 并 期 望 返回 实现 该 接口 的 GraphQLob jectType 实例 。 我 们 使 用 了 source 的 _tableName 属性 ， 
它 不 是 数据 库 中 的 实际 的 列 。 稍 后 我 们 将 看 到 如 何 注 入 它 。 
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我 们 返回 了 两 个 尚未 定义 的 对 象 : UserType 和 PostType。 在 resolveType 函数 下 方 添加 它们 的 





定义 : 
const resolveld = (source) => { 


return tables.dbldToNodeld(source.id, source._ tableName); 


此 


export const UserType = new GraphQLObjectType({ 
name: "User '， 
interfaces: [ NodeInterface ]， 
fields: { 
id: { 
type: new GraphQLNonNull(GraphQLID), 
resolve: resolveld 
二 5 
name: { 
type: new GraphQLNonNull(GraphQLString) 
起 
about: { 
type: new GraphQLNonNull(GraphQLString) 


} 
下 季 


export const PostType = new GraphQLObjectType({ 

name: 'Post', 

interfaces: [ NodeInterface ]， 

fields: { 

id: { 

type: new GraphQLNonNull(GraphQLID), 
resolve: resolveld 
}: 
createdAt: { 
type: new GraphQLNonNull(GraphQL String), 
后 
body: { 
type: new GraphQLNonNull(GraphQLString) 








} 
} 





大 部 分 代码 看 起 来 应 该 与 之 前 使 用 的 代码 相似 。 我 们 定义 了 GraphQLObjectType 的 新 实例 ， 将 
NodeInterface 添加 到 它们 的 interfaces 属性 中 , 并 实现 了 它们 的 fields 属性 。 有 些 字段 被 包装 在 
GraphQLNonNul1l 中 ， 这 将 强制 它们 必须 存在 。 如 果 不 提供 字段 的 resolve 函数 的 实现 ， 那 么 它 只 会 





















































对 基础 源 数据 执行 简单 的 属性 查找 ， 例 如 ，name 字段 将 调用 source .name。 




















我 们 确实 在 这 两 种 类 型 上 都 提供 了 针对 id 的 resolve 的 实现 ， 它 们 都 使 用 相同 的 resolveId 郴 























数 。 即 使 NodeInterface 代码 不 能 提供 默认 的 resolve 函数 , 但 我 们 仍 可 以 通过 引用 相同 的 变量 来 共 


享 代码 。 


























resolveId 函数 的 实现 使 用 了 tables.dbIdToNodeId， 不 过 我 们 在 table. js 中 尚未 定义 它 。 











开 tables.js， 并 在 底部 添加 这 两 个 新 的 导出 函数 : 
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export const dbIdToNoqeId = (dbId，tableName) => { 
return “${tableName}:${db1Id}.; 
}; 


export const splitNodeId = (nodeIld) => { 
const [tableName，dbId] = nodeld.split(':'); 
return { tableName, db1ld }; 


}; 

前 面 提 到 ，Node ID 必须 是 全 局 唯一 的 ， 但 在 data .json 中 ， 我 们 会 遇 到 一 些 行 ID 冲突 。 这 在 
Postgres 和 MySQL 等 关系 数据 库 中 并 不 少见 ， 因 此 我 们 必须 编写 一 些 将 行 整数 ID 强制 为 唯一 字符 串 
的 逻辑 。 在 生产 应 用 程序 中 ， 你 可 能 希望 混淆 ID 以 减少 泄漏 相关 的 数据 库 信息 ， 但 使 用 原始 表 名 将 
使 现在 的 调试 变 得 更 加 容易 。 

我 们 几乎 已 准备 好 运行 GraphQL 查询 了 ! 转 到 server .js， 导 入 一 些 我 们 刚刚 编写 的 类 型 ， 然 后 
将 RootQuery 更 改 为 仅 包含 我 们 想 要 的 新 node 字段 : 


import { 
NodeInterface, 
UserType, 
PostType 

} from './src/types'; 





















































import * as loaders from './src/loaders'; 


const RootQuery = new GraphQLObjectType({ 
name: "RootQuery ' ， 
description: 'The root query', 
fields: { 
node: { 
type: NodeInterface, 
args: { 
id: { 
type: new GraphQLNonNull(GraphQLID) 
} 
}, 
resolve(source, args) { 
return loaders.getNodeByld(args .id); 
} 
} 
} 
有 


我 们 还 导入 了 一 个 新 文件 src/loaders. js， 并 需要 对 其 进行 编辑 。 它 的 目的 是 公开 从 数据 源 
中 加 载 数据 的 API， 因 为 我 们 不 想 把 服务 器 或 顶级 模式 代码 与 直接 访问 数据 库 的 代码 混杂 在 一 起 。 
创建 src/loaders .js 文件 ， 并 添加 这 个 小 函数 : 


import * as database from './database'; 
import * as tables from './tables'; 





























export const getNodeById = (nodeld) => { 
const { tableName, dblId } = tables.splitNodeId(nodeld); 
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const table = tables[tableName] ; 

const query = table 
.Select(table.star()) 
.where(table.id.equals(db1d)) 
.1imit(1) 
.toQuery( ); 

return database.getSql(query).then((rows) => { 
if (rows[0]) { 


rows[0]._ tableName = tableName 


} 


return rows[0]; 
3 
}; 
这 应 该 与 我 们 在 seedData 中 编写 的 代码 看 起 来 类 似 ， 我们 使 用 node-sql API 根据 所 提供 的 
nodeId 来 构造 一 个 SQL 查询 。 请 记 住 ， 此 nodeId 是 全 局 唯一 的 节点 ID ， 而 不 是 行 ID ， 因 此 我 们 使 
用 tables.splitNodeId 来 提取 特定 于 数据 库 的 信息 。 


一 个 我 们 经 常 使 用 的 技巧 是 附加 _tableName 属性 。 在 前 面 的 resolveType 子 数 中 ,以 及 在 其 他 
需要 将 对 象 绑 定 回 其 底层 表 的 地 方 我 们 都 得 到 了 它 的 帮助 。 添 加 此 代码 很 安全 ， 因 为 我 们 没有 在 
GraphQL 模式 中 显 式 公开 _tableName 属性 ， 所 以 恶意 使 用 者 无 法 访问 它 。 

所 有 这 些 代码 中 发 生 的 一 件 非 常 微妙 但 又 非常 重要 的 事情 是 loaders .getNodeById 返 回 了 一 个 
promise ( 这 就 是 可 以 使 用 .then 附 加 _tableName 的 原因 )， 并 最 终 在 resolve 函 数 中 返回 该 promise。 
promise 是 GraphQL 处 理 异 步 字 段 解析 的 方式 ， 通 常 在 数据 库 查 询 和 第 三 方 API 调 用 中 发 生 。 如 果 你 使 
用 的 API 本 身 并 不 支持 的 promise， 那 么 可 以 参考 promise API" 将 基于 回调 的 API 转 换 为 promise。 


最 后 一 步 ,需要 告诉 GraphQLschema 关于 模式 中 所 有 可 能 的 类 型 。 如 果 使 用 了 接口 就 必须 这 样 做 ， 
因为 这 样 GraphQL 就 可 以 计算 实现 了 接口 的 类 型 列表 。 


const Schema = new GraphQLSchema({ 
types: [UserType, PostTypel], 
query: RootQuery, 
mutation: RootMutation, 


})3 


这 样 就 完成 了 ! 重启 服务 器 , 打开 GraphiQL ( 仍 可 以 在 http://localhost:3060/graphql 找到 )， 
然后 尝试 以 下 查询 : 
{ 


node(id:"users:4") { 
id 
. on User { 
name 
} 
} 
} 








































































































































































































GD 参见 MDN 文档 “Promise”。 


14.2 Windows 用 户 的 特殊 设置 491 





你 应 该 看 到 数据 返回 : 
{ 
"data": { 
"node": { 
"id": "users:4", 
"Name": "Roger" 
} 
} 
} 


可 以 尝试 使 用 其 他 节点 ID ， 比 如 "posts:4" 和 ... on Post。 在 继续 之 前 ， 思 考 一 下 底层 的 原理 : 


我 们 请 求 了 一 个 特定 的 节点 卫 , 它 会 发 起 一 个 数据 库 调 用 , 然后 根据 数据 库 的 源 数据 来 针对 每 个 字段 
进行 解析 。 


现在 可 以 针对 当前 服务 器 编写 一 个 非常 简单 的 前 端 应 用 程序 ， 不 过 我 们 还 有 更 多 的 模式 要 填写 。 
让 我 们 先 处 理 其 中 一 些 friends 列表 和 posts 连接 。 


14.2.11 列表 


前 面 提 到 过 ，friends 字段 应 返 
回 一 个 简单 的 ID 列表 。 



































回 User 类 型 列表 。 让 我 们 来 一 步 步 地 实现 这 个 目标 ， 现 在 先 返 














首先 编辑 UserType。 打 开 types .js 和 可 以 看 到 一 个 新 的 friends 字段 : 
about: { 
type: new GraphQLNonNu1l1(GraphQLString) 





}, 

friends: { 
type: new GraphQLList(GraphQLID), 
resolve(source) { 


return loaders.getFriendIldsForUser(source).then((rows) => { 
return rows.map((row) => { 


return tables.dbIldToNodeId(row.user_id_b, row._ tableName); 
}); 
}) 
} 
} 





我 们 将 friends 字段 设置 为 返回 ID 的 GraphQLList。GraphQLList 的 工作 方式 类 似 于 前 面 的 
GraphQLNonNu1l1， 它 在 构造 函数 中 封装 了 一 个 内 部 类 型 。 在 resolve 函数 内 部 ， 我们 调用 了 一 个 新 
的 加 载 器 ( 待 写 )， 然 后 将 其 结果 强制 转换 为 我 们 期 望 的 全 局 唯一 的 ID。 


在 文件 的 顶部 添加 一 个 import 语句 来 为 我 们 新 的 加 载 器 做 准备 : 

import x* as tables from './tables'; EE 
import * as loaders from './loaders'; 

用 新 的 getFriendIdsForUser 函数 来 编辑 10aders . js: 


export const getFriendIdsForUser = (userSource) => { 
const table = tables.usersFriends; 
const query = table 
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.Select(table.user_id_b) 
.where(table.user_id_a.equals(userSource.id)) 


.toQuery( ); 


return database.getSql(query).then((rows) => { 
rows. forEach((row) => { 
row._ tableName = tables.users.getName(); 
和 
return rows; 
}); 
此 


这 就 是 需要 编写 的 所 有 新 代码 ， 启 动 GraphiQL 并 运行 以 下 查询 : 
{ 

















node(id:"users:4") { 
id 
. on User { 
name 
friends 
. 
} 
} 


确认 一 下 你 的 结果 是 否 等 于 如 下 所 示 的 结果 : 
{ 


"data": { 
"node": { 
"id": "users:4", 
"name": "Roger", 
"friends": [ 
"Users:1", 
"USsers:3", 
"USers:2" 
] 
} 
} 
} 


14.2.12 ”性 能 前 瞻 性 优化 


很 棒 ， 但 我 们 应 该 探索 一 下 隐藏 在 底层 的 一 些 业 务 。 当 我 们 解析 原始 node 字段 时 ， 会 执行 一 个 
数据 库 查询 ( loaders .getNodeById )。 然 后 ， 在 解析 完 该 节点 之 后 ， 我 们 执行 了 另 一 个 数据 库 查 询 
(loaders.getFriendIdsForUser )。 如 果 将 此 模式 扩展 到 更 大 的 应 用 程序 ， 可 以 想象 到 会 触发 许多 数 
据 库 查询 一 一 最 坏 情 况 下 ， 会 是 每 个 字段 一 个 查询 。 但 我 们 知道 在 SQL 中 ， 可 以 用 一 个 有 效 的 SQL 
查询 来 表示 这 两 个 查询 。 
事实 上 GraphQL 库 提供 了 一 种 进行 此 类 优化 的 方式 , 我 们 希望 “提前 查看 ”GraphQL 查询 的 其 余 
部 分 ， 并 执行 更 有 效 的 解析 调用 。 可 能 并 非 在 每 种 情况 下 都 这 样 做 , 但 在 某 些 产 品 和 工作 负载 下 可 能 
会 受益 菲 浅 。 
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打开 server. js， 让 我 们 对 node 字段 的 resolve 也 数 做 一 些 工 作 。 除 了 source 和 args 外 ， 
GraphQL 还 传递 了 另外 两 个 要 解析 的 变量 : context 和 info。 稍 后 将 使 用 context 来 帮助 进行 身份 验 
证 和 授权 。info 是 一 个 对 象 包 ， 包 含 了 整个 GraphQL 查询 的 抽象 语法 树 (AST )。 我 们 将 做 一 个 简单 
的 AST 遍历， 并 决定 是 否 应 该 运行 一 个 更 高 效 的 加 载 右 : 

















node: { 
type: NodeInterface, 
args: { 
id: { 
type: new GraphQLNonNull(GraphQLID) 
} 
点 


Tesolve(source，args，context，info) { 
let includeFriends = false; 


const selectionFragments = info.fieldqdASTs[0] .selectionSet.selections; 
const userSelections = selectionFragments .filter((selection) => { 


return selection.kind === 'IlnlineFragment' && selection.typeCondition.name\ 
.Value === 'User'; 


}) 


userSelections. forEach((selection) => { 
selection.selectionSet.selections.forEach((innerSelection) => { 
if (innerSelection.name.value === 'friends') { 
includeFriends = true; 
} 
3 
3 


if (includeFriends) { 
return loaders.getUserNodeWithFriends(args.id); 
} 
else { 
return loaders.getNodeById(args.id); 
} 
} 
} 


在 遍历 AST 的 过 程 中 发 生 了 很 多 事情 ,我们 不 会 详细 讨论 其 中 的 大 部 分 细节 。 如 果 最 终 在 代码 
执行 这 些 前 脆性 优化 ， 可 以 使 用 console. 1og 记录 树 的 每 个 级 别 并 确定 可 以 访问 哪些 信息 


Co 


本 质 上 ,我 们 是 在 node 字段 的 选择 集中 查找 User 片段 ,然后 确定 该 片段 是 否 访问 friends 字段 。 
如 果 是 ， 那 么 我 们 将 运行 一 个 新 的 加 载 器 ; 否则， 我 们 将 退回 到 运行 原始 加 载 器 。 


下 面 来 看 新 的 1oaders .getUserNodewithFriends 也 数 : 





















































export const getUserNodeWithFriends = (nodeId) => { 
const { tableName, dblId } = tables.splitNodeId(nodeld); 


const query = tables.users 


.select(tables.usersFriends.user_id_b, tables.users.star()) 
.from( 


tables.users.1leftJoin(tables.usersFriends) 
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.on(tables.usersFriends.user_id_a.equals(tables.users.id)) 
) 
.Where(tables.users.id.equals(dqbId)) 
.toQuery( ); 


return database.getSql(query).then((rows) => { 
if (!rows[0]) { 
return undefined; 


} 


const _ friends = rows.map((row) => { 
return { 
user_id_b: row.user_id_b, 
_tableName: tables.users.getName() 
} 
六 


const source = { 
id: rows[0] .id， 
name: rows [0] .name, 
about: rows[0] .about， 
_ tableName: tableName, 
_ friendqds: _ friends 
}; 
return source; 
}); 
二 
这 开始 变 得 有 点 复杂 ， 而 且 只 特定 于 这 个 产品 和 我 们 选择 的 框架 ( 这 是 处 理性 能 优化 时 的 一 个 常 
见 模式 )。 我 们 的 SQL 查询 现在 可 以 同时 获取 所 有 好 友和 用 户 的 个 人 资料 ， 从 而 消除 了 数据 库 的 多 次 
查询 。 然后 我 们 把 这 些 朋友 数据 加 载 到 一 个 _friengs 属性 (我们 选择 继续 保留 “私有 ”属性 的 前 绥 )， 
并 可 以 在 types.js 中 访问 它 : 
friends: { 
type: new GraphQLList(GraphQLID), 
resolve(source) { 
if (source._ friends) { 
return source._ friends.map((row) => { 
return tables.dbldToNodeId(row.user_id_b, row.._ tableName); 


}); 
} 


























return loaders .getFriendIdsForUser(source).then((rows) => { 
return rows.map((row) => { 
return tables.dbldToNodeIld(row.user_id_b, row.._ tableName); 


}); 




















其 他 应 用 程序 可 能 会 以 不 同 的 方式 执行 前 脆性 优化 ， 它 们 可 能 在 后 台 预 先 缓存 ， 而 不 是 将 多 个 
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SQL 查询 组 合 为 一 个 查询 。 重 要 的 一 点 是 ，resolve 接收 许多 参数 ， 并 可 以 使 你 缩短 常规 的 递归 解析 


14.2.13 ”继续 讨论 列表 


friends 字段 返回 一 个 完整 的 ID 列表 ( 可 能 需要 添加 一 些 内 容 )， 但 我 们 真正 需要 的 是 一 个 完整 
的 User 类 型 列表 。 对 于 大 型 列表 , 我 们 可 能 希望 使 用 惯用 的 GraphQL 连接 ( 很 快 将 实现 ), 但 会 允许 
friends 字段 返回 每 个 查询 的 所 有 条 目 。 
我 们 将 从 删除 为 性 能 优化 添加 的 逻辑 开始 。 因 为 应 用 程序 会 有 一 些 变化 ， 所 以 我 们 可 以 在 它 的 能 
力 稳定 之 后 重新 评估 性 能 。 
resolve(source, args, context, info) { 
return loaders.getNodeById(args.id); 


} 
接 下 来 需要 将 friends 字段 返回 的 类 型 更 改 为 User 列表 。 由 于 之 前 已 有 了 用 于 通过 ID 来 加 载 任 
意 节点 的 加 载 器 ， 因 此 无 须 编 写 太 多 代码 : 


export const UserType = new GraphQLObjectType({ 
name: 'User', 
interfaces: [ NodeInterface ]， 
// 注意 ， 现 在 这 是 一 个 涵 数 
fields: () => { 
return { 
id: { 
type: new GraphQLNonNull(GraphQLID), 
resolve: resolveld 
}, 
name: { type: new GraphQLNonNull(GraphQLString) }, 
about: { type: new GraphQLNonNull(GraphQLString) }, 
friends: { 
type: new GraphQLList(UserType), 
resolve(source) { 
return loaders.getFriendIldsForUser(source).then((rows) => { 
const promises = rows.map((row) => { 
const friendNodeId = tables.dbIldToNodeIld(row.user_id_b, row._ tableNam\e); 
return loaders.getNodeById(friendNodelId); 
}); 


return Promise.all(promises); 


} 
上 


现在 ， 我 们 将 friends 类 型 设置 为 GraphQLList(UserType)。 由 于 JavaScript 变量 提升 的 工作 方 
式 ， 我 们 必须 将 fields 属性 更 改 为 函数 而 不 是 对 象 ， 以 获得 “递归 ”类 型 定义 ( 其 中 类 型 返回 其 自 
身 的 字段 )。 我 们 对 先前 检索 到 的 所 有 ID 调用 了 loaders .getNodeById 加 载 器 。 重 启 服务 器 ， 并 在 
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GraphiQL 中 执行 这 类 查询 : 





{ 
node(id:"users:4") { 
. on User { 
friends { 
id 
about 
name 
} 
} 
} 
} 
已 应 该 会 返回 以 下 数据 : 
{ 
"data": { 
"node": { 
"friends": [ 
6 
"id": "users:1", 
"about": "Sports!", 
"name": "Harry" 
}; 
{ 
"id": "users:3", 
"about": "Love books", 
"name": "Hannah" 
}> 
{ 
"id": "users:2", 
"about": "I'm the best", 
"name": "David" 
} 
] 
} 
} 
} 


你 其 至 可 以 更 进一步 ， 查 询 friends 的 friends! 


14.3 ”连接 





下 面 要 实现 惯用 的 连接 字段 。 我 们 不 


























是 返回 


个 简单 的 列表 ， 而 是 返回 一 个 更 复杂 (但 功能 强 


大 ) 的 结构 。 昌 然 还 有 其 他 工作 要 做 ， 但 连接 字段 最 适合 那些 较 大 或 无 界 的 列表 。 在 一 个 查询 中 返回 
一 个 巨大 的 列表 可 能 被 禁止 或 产生 浪费 ， 因 此 GraphQL 模式 倾向 于 将 这 些 字段 分 割 成 更 小 的 分 页 块 。 
回想 一 下 ,上 一 章 中 惯用 的 GraphQL 使 用 了 称 为 游标 的 不 透明 字符 串 ， 而 不 是 使 用 文字 页 码 。 游 




















标 对 数据 的 实时 更 改 更 有 弹性 ， 这 可 能 会 导致 简单 的 基于 页 男 



































i 的 系统 中 出 现 数据 重复 。 连 接 的 

















pageInfo 字段 提供 了 元 数据 来 帮助 发 出 新 请 求 ， 而 edges 字段 将 保存 每 个 项 目的 实际 数据 。 
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我 们 希望 posts 的 查询 如 下 所 示 ， 而 不 是 像 之 前 friends 所 使 用 的 列表 查询 : 
{ 


node(id:"users:1") { 
. on User { 
posts(first: 1) { 
pageInfo { 
hasNextPage 
hasPreviousPage 
startCursor 
endCursor 
} 
edges { 
cursor 
node { 
id 
body 








、 


现在 posts 字段 将 返回 PostsConnection 类 型 ， 而 不 是 返回 PostType 列表 。 
除了 从 graphql 库 中 导入 更 多 类 型 外 ， 还 需要 在 types.js 中 定义 PageInfo 、PostEdge 和 


PostsConnection 类 型 : 




















import { 
GraphQLInterfaceType， 
GraphQLObjectType， 
GraphQLID ， 
GraphQLString ， 
GraphQLNonNu1l1， 
GraphQLList， 
GraphQLBoolean ， 
GraphQLInt， 

} from 'graphql'; 


const PageInfoType = new GraphQLObjectType({ 
name: "PageInfo '， 
fields: { 
hasNextPage: { 
type: new GraphQLNonNull(GraphQLBoolean) 
}; 
hasPreviousPage: { 
type: new GraphQLNonNull(GraphQLBoolean) 
}, 
startCursor: { 
type: GraphQLString ， 
}, 


endCursor: { 
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type: GraphQLString， 
} 


上 


const PostEdgeType = new GraphQLObjectType({ 
name: "PostEdge ' ， 


fields: () => { 
return { 


cursor: { 


type: new GraphQLNonNu1l1(GraphQLString) 
虑 


node: { 


type: new GraphQLNonNull(PostType) 
} 


> 


const PostsConnectionType = new GraphQLObjectType({ 
name: "PostsConnection ' ， 


fields: { 
pageInfo: { 


type: new GraphQLNonNull(PageInfoType) 
}, 
edges: { 

type: new GraphQLList(PostEdgeType) 
} 
} 
































这 些 大 部 分 只 是 类 型 定义 ,目前 还 没有 固有 的 解析 函数 。 不 同 的 应 用 程序 将 采 月 

式 来 解决 连接 问题 ， 因 此 不 要 把 这 里 的 一 些 实现 细节 视 为 你 自己 工作 的 福音 。 
下 面 需 要 将 UserType 连接 到 我 们 创建 的 新 类 型 上 ， 并 创建 实际 的 posts 字段 。 
} 


点 
posts: { 
type: PostsConnectionType, 
args: { 
after: { 
type: GraphQLString 
4 
first: { 
type: GraphQLInt 
4 





不同 的 方式 和 模 




















}3 


resolve(source, args) { 


return 1oaders .getPostIdsForUser(source，args).then(({ 


rows，pageInfo }) =\ 
> { 


const promises = rows.map((row) => { 


const postNodeld = tables.dbldToNodeld(row.id, row. 


tableName); 
return loaders.getNodeById(postNodeld) .then( (node) { 
const edge = { 


1 | 
~v 
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node, 


CUrsor: TOW._ CUITSOT 


}; 

return edge; 
1 

}); 


return Promise.all(promises).then((edges) => { 


return { 
edges, 
pageInfo 


} 
} 


地 


除了 新 的 参数 之 外 ， 这 和 实现 friends 
列表 ， 而 是 返回 一 个 PostsConnectionType 


字段 的 方式 很 类 似 。 请 记 住 ， 该 字段 并 不 返回 PostType 
， 它 是 一 个 带 有 pageInfo 和 edges 键 的 对 象 。 








我 们 使 用 了 一 个 新 的 加 载 咒 方法 getPostIdsForUuser ， 并 将 args 传递 给 解析 器 。 我 们 将 很 快 实 


现 这 个 加 载 器 , 它 不 仅 会 返回 相关 联 的 行 , 而 


且 还 会 返回 一 个 对 应 于 PageInfoType 的 pageInfo 结构 。 








然后 ， 我 们 为 每 个 标识 符 加 载 节点 ， 并 使 用 行 游 标 将 它们 包装 成 PostEdgeType。 
有 很 多 可 以 在 JavaScript 和 数据 库 级 别 上 提高 效率 的 方法 ， 但 下 面 通过 实现 getPostIdsForUser 





来 让 代码 工作 。 


























这 个 加 载 器 将 根据 分 页 参数 和 分 配 返 回 的 行 所 需 的 游标 来 确定 要 获取 哪些 数据 。 当 支持 所 有 可 能 


























性 时 ， 基 于 参数 对 数据 进行 切片 和 分 页 的 算法 是 相当 复杂 的 ， 你 可 以 在 Relay 规范 中 详细 了 解 它 。 为 
了 简单 起 见 ， 我 们 只 支持 参数 after 和 first。 


首先 定义 新 函数 并 解析 参数 : 





export const getPostIdsForUser = (userSource, args) => { 


let { after, first } = args; 
if (!first) 

first -= :25 
} 














换 句 话说 ， 如 果 用 户 没有 提供 first 参数 ,那么 我 们 将 返回 两 个 帖子 。 接 着 开始 构造 SQL 查询 : 








const table = tables.posts; 
let query = table 
.select(table.id, table.created_at) 


.where(table.user_id.equals(userSource.id)) 


.order(table.created_at.asc) 
.limit(first + 1); 




















我 们 获取 first + 1 行 以 作为 简便 的 方法 来 确定 是 否 有 超出 用 户 需 要 的 行 。 我 们 的 查询 由 











500 第 14 章 ”GraphQL 服务 器 


2 

















created_at 字段 进行 ASC (升序 ) 排序 ， 这 对 于 在 后 续 查 询 中 获得 确定 性 数据 非常 重要 。 
接 下 来 解释 一 下 可 能 被 传递 的 after 游标 : 
if (after) { 
// 解析 游标 
const [id, created_at] = after.split(':'); 
query = query 
.where(table.created_at.gt(after)) 
.where(table.id.gt(id)); 


本 例 中 的 游标 是 由 行 ID 和 行 日 期 组 成 的 字符 串 。 通 常 在 大 多 数 系统 中 游标 将 基于 某 个 日 期 ， 
为 在 处 理 大 规模 数据 时 ， 将 ID 保持 为 递增 的 整数 并 不 常见 。 
终于 可 以 执行 数据 库 查询 : 


return database.getSql(query.toQuery()).then((allRows) => { 
const rows = allRows.slice(@, first); 















































rows.forEach((row) => { 
row._ tableName = tables.posts.getName(); 
row._ cursor = row.id + ':' + row.created_at; 


请 记 住 ， 实 际 上 查询 的 行 数 比 用 户 请 求 的 多 一 行 ， 这 就 是 我 们 必须 对 返回 的 行进 行 切片 的 原因 。 
我 们 还 为 每 一 行 构造 游标 并 设置 _tableName 属性 ， 以 便 将 来 的 JOIN 查询 能 正常 工作 。 
现在 有 了 行 数据 ， 我 们 执行 它 并 开始 创建 pageInfo 对 象 : 


const hasNextPage = allRows.length > first; 
const hasPreviousPage = false; 









































const pageInfo = { 
hasNextPage: hasNextPage, 
hasPreviousPage: hasPreviousPage, 


} 


if (rows.length > 60) { 
pageInfo.startCursor = rows[8]._ cursor; 
pageInfo.endCursor = rows[rows.length - 1] .cursor; 


} 


可 以 保存 对 allRows 的 引用 来 计算 nasNextPage。 我们 因为 不 支持 参数 before 和 1ast， 所 以 总 
是 将 hasPreviousPage 设置 为 false。 设置 startCursor 和 endCursor 与 获取 rows 数组 的 


























第 一 个 和 
最 后 一 个 元 素 一 样 简单 。 
我 们 返回 了 rows 和 pageInfo 对 象 来 完成 加 载 器 。 最 后 ,重启 服务 器 ， 然 后 尝试 一 下 本 节 开 头 描 
述 的 查询 : 
node(id:"users:1") { 
. on User { 
posts(first: 1) { 
pageInfo { 


hasNextPage 
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hasPreviousPage 
startCursor 
endCursor 
} 
edges { 
Cursor 
node { 
id 
body 


应 该 得 到 这 个 用 户 的 第 一 个 帖子 作为 响应 结果 : 


{ 
"data": { 
"node": { 
"posts": { 
"pageInfo": { 
"hasNextPage": true, 
"hasPreviousPage": false, 
"startCursor": "1:2016-04-01" ， 
"endCursor": "1:2016-04-01" 
二 
"edges": | 
{ 
"cursor": "1:2016-04-01"， 
"node": { 
"id": "posts:1", 
"body": "The team played a great game today!" 


看 到 那个 endcursor 了 吗 ? 现 在 尝试 使 用 该 游标 作为 after 值 来 运行 查询 : 
{ 


node(id:"users:1") { 
. on User { 
posts(first: 1, after:"1:2016-04-01") { 
pageInfo { 
hasNextPage 
hasPreviousPage 
startCursor 
endCursor 
} 
edges { 
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CuUursor 
node { 

id 
body 
} 
} 
} 
} 
} 
} 





这 将 返回 该 系列 中 的 下 一 篇 (从 hasNextPage 字段 可 判断 出 ， 这 也 是 最 后 一 篇 ) 帖子 : 
{ 


"data": { 
"node": { 
"posts": { 
"pageInfo": { 


"hasNextPage": 
"hasPreviousPage": 
"startCursor": 
"endCursor": 


和 
"edges": [ 
{ 
"Cursor": 
"node": { 
"id": 
"body": 
e else did." 





i 
恭喜 


构建 分 页 或 无 限 滚动 的 UI。 
14.3.1 身份 验证 


， 你 已 经 实现 了 基于 游标 的 分 页 ! 你 或 许可 以 对 静态 数据 使 用 简单 的 列表 ,但 使 用 
防止 各 种 前 端 bug 以 及 相对 频繁 更 新 的 数据 的 复杂 性 。 它 还 使 你 可 以 利用 Relay 对 分 页 的 理解 来 快速 


false, 

false, 
"2:2016-04-02"， 
"2:2016-04-02" 


"2:2016-04-02"， 


"posts:2", 


"Honestly I didn't do so well at yesterday's game, but everyon\ 














游标 可 以 






































早 些 时 候 我 们 注意 到 ， 在 社交 网 络 











友谊 是 有 “级 别 ” 的 ， 因 为 帖子 应 该 受到 尊重 。 例 如 ， 如 果 











一 个 帖子 有 一 个 friend 级 别 ， 那 么 只 有 friend 或 更 高 级 别 ( 而 不 是 acquaintance 或 较 低级 别 ) 的 


朋友 才能 看 到 它 。 





这 个 主题 通常 称 为 授权 。GraphQL 没有 继承 关于 授权 的 概念 或 主张 ， 这 使 得 它 可 以 灵活 地 实现 




















控制 哪些 人 可 以 看 到 模式 中 的 数据 。 这 也 意味 着 我 们 需要 小 心 和 





























保 没有 意外 地 向 用 户 暴 露 应 该 隐藏 的 
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我 们 将 向 服务 器 添加 一 个 小 的 身份 验证 层 , 它 将 验证 是 否 允 许 处 理 GraphQL 查询 , 以 及 控制 查看 





























不 同 帖子 的 授权 逻辑 。 我 们 将 使 用 的 技术 肯定 不 是 使 用 GraphQL 实现 这 些 功能 的 唯一 方法 , 但 是 它们 
应 该 会 使 你 激发 一 些 可 能 适用 于 你 的 产品 的 想法 。 























对 于 身份 验证 ,我 们 将 使 用 HTTP 基本 身份 验证 。 现 在 有 无 数 种 用 于 身份 验证 的 协议 ,比如 OAuth、 





JSON Web Token 和 cookie， 最 终 的 选择 对 于 每 种 产品 来 说 都 是 非常 独特 的 。HTTP 基本 身份 验证 很 容 


易 添 加 到 当前 的 Node.js 服务 右 























， 这 也 是 本 例 中 选择 它 的 主要 原因 。 

首先 ， 安 装 basic-auth-connect 包 ， 它 提供 了 一 个 非常 简单 的 API 来 允许 某 些 凭证 的 访问 : 
$ npm i basic-auth-connect@1.0.0 --save --save-exact 

然后 在 服务 器 代码 中 ， 导 和 以 下 模块 : 


import express from 'express ' 
import basicAuth from 'basic-auth-connect 

















const app = express() 





在 添加 GraphQL 端点 之 前 ， 添 加 一 个 对 app.use 的 新 调用 。 请 记 住 ，Express 将 按 添加 的 顺序 触 





发 每 个 app.use 也 数 。 如 果 我 们 将 新 的 basicAuth 吗 数 放 在 graphqlHTTP 六 数 之 后 ， 那 么 此 顺序 将 
是 不 正确 的 。 


下 cURL 命令 来 测试 一 个 简单 的 查询 : 


你 使 用 GUI 输入 用 户 名 和 密码 。 


app.use(basicAuth(function(user，pass) { 
return pass === 'mypassword1'; 


})); 
app.use('/graphql', graphqlHTTP({ schema: Schema, graphiql: true })); 


目前 ， 对 于 任何 使 用 了 正确 密码 的 用 户 ， 我们 将 允许 它 进 行 查询 。 重 启 服务 器 ,然后 尝试 运行 以 





$ curl -XPOST -H 'content-type:application/graphql' http://localhost:3000/graphql -d\ 
'{ node(id:"users:4") { id } }' 
Unauthorized 











由 于 没有 指定 用 户 名 或 密码 ， 因 此 查询 失败 。 尝 试 下 一 个 命令 ,并 正确 地 传递 插 证 : 


$ curl -XPOST -H 'content-type:application/graphql' --user 1:mypassword1 http://loca\ 
lhost:300600/graphql -dd '{ node(id:"users:4") { id } }' 
{"data":{"node":{"id":"users:4"}}} 



































太 好 了 ,现在 身份 验证 已 在 正常 工作 了 。 你 也 可 以 在 Chrome 和 Firefox 中 尝试 此 操作 ,它们 允许 















































此 处 的 重要 概念 是 ， 身 份 验证 通常 与 GraphQL 模式 解 厢 。 将 用 户 名 和 密码 传递 到 GraphQL 查询 











中 来 验证 用 户 身份 (通过 HTTPS ) 是 完全 可 行 的 ， 但 惯用 的 GraphQL 更 倾向 于 分 离 这 些 问题 。 
14.3.2 ”授权 


的 用 





下 面 来 处 理 授 权 问 题 。 请 记 住 ， 上 一 章 提 出 了 viewer 字段 的 概念 ， 用 于 表示 数据 图 中 的 已 登录 
户 节点 。 我 们 将 把 该 字段 添加 到 模式 中 ， 并 允许 解析 代码 知晓 viewer 的 权限 。 
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通过 使 用 basic-auth-connect 库 , 我 们 可 以 访问 每 个 Express 请 求 的 user 属性 。 关 于 要 如 何 确 
定 发 出 每 个 请 求 的 用 户 的 细节 将 根据 身份 验证 库 的 不 同 而 有 所 区 别 ,但 我 们 只 需 采 用 该 request .user 
属性 并 转发 给 GraphQL 解析 器 即 可 ; 


app.use('/graphql', graphqlHTTP((req) => { 
const context = 'users:' + req.user; 
return { schema: Schema, graphiql: true, context: context, pretty: true }; 


})); 


现在 ,我们 不 再 是 为 所 有 请 求 返回 相同 的 schema 和 graphiql 设置 ， 而 是 为 每 个 GraphQL 查询 
返回 不 同 的 配置 对 象 。 这 个 新 配置 将 context 属性 设置 为 用 户 名 ， 就 像 前 面 示 例 中 的 user1 一 样 。 


下 一 个 问题 是 如 何在 GraphQL 字段 中 访问 该 context? 回想 一 下 ,在 前 面 的 章节 中 ,每 个 resolve 
函数 都 会 传人 一 些 参数 。 我 们 已 非常 熟悉 args 参数 了 ， 但 事实 证 明 context 参数 也 已 传人 了 。 
通过 已 知 的 知识 来 添加 viewer 字段 : 


const RootQuery = new GraphQLObjectType({ 
name: "RootQuery ' ， 
description: 'The root query', 
fields: { 
viewer: { 
type: NodeInterface， 
resolve(source, args, context) { 
return loaders.getNodeById(context); 
} 
拒 


如 果 重 启 服务 器 ， 那 么 可 以 像 下 面 这 样 对 端点 执行 cURL 命令 : 


$ curl -XPOST -H 'content-type:application/graphql' --user 1: mypassword1 http: //loca\ 
lhost:3000/graphql -d '{ viewer { id } 用 
{ 
"qatar:.{ 
"viewer": { 
"id": "users:1" 
} 
} 
} 


可 以 使 用 . . .on User 内 联 片段 来 查询 更 多 属性 。 因 为 我 们 把 应 用 程序 数据 建 模 为 一 个 图 ， 所 以 
能 够 以 最 少 的 代码 修改 来 提供 这 种 类 型 的 一 臻 API。 非 常 简洁 ! 
现在 不 仅 顶 级 viewer 字段 可 以 访问 context ， 而 且 所 有 resolve 函数 都 可 以 访问 ， 无 论 它们 处 
在 层次 结构 中 的 哪个 深度 。 这 使 得 向 posts 字段 添加 授权 检查 变 得 非常 简单 。 
首先 查看 resolve 函数 中 的 context 人 参数: 


resolve(source, args, context) { 
return loaders.getPostldsForUser(source, args, context).then(({ rows, page\ 
Info }) => { 
GraphQL 模式 不 应 该 直接 处 理 授权 逻辑 ， 因 为 这 很 可 能 与 你 的 主 代码 库 中 的 逻辑 重复 。 相 反 ， 这 
一 职责 应 该 落 在 底层 数据 加 载 库 或 服务 中 ， 如 这 里 所 演示 的 那样 。 
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在 getPostIdsForUser 函数 中 ,我 们 需要 从 数据 库 中 加 载 每 个 帖子 的 level 字段 后 才能 使 用 它 。 
我 们 要 做 的 就 是 把 它 添加 到 select 参数 中 : 


let query = table 
.select(table.id, table.created_at, table.1level) 
.Where(table.user_id.equals(userSource.id)) 
.order(table.created_at.asc) 
.limit(first + 10); 


除了 运行 数据 库 查 询 来 获取 所 有 的 帖子 外 , 还 需要 运行 男 一 个 查询 来 获取 context 的 所 有 用 户 访 
问 级 别 。 我 们 将 使 用 该 级 别 列 表 来 过 滤 数 据 库 查询 的 结 


return Promise.all([ 
database.getSql(query .toQuery()), 
getFriendshipLevels(context) 
]).then(([ allRows, friendshipLevels ]) => { 
allRows = allRows.filter((row) => { 
return canAccessLevel(friendshipLevels[userSource.id], row.level); 
J 


const rows = allRows.slice(@, first); 












































我 们 正在 引用 两 个 尚未 实现 的 新 函数 : getFriendshipLevels 和 canAccessLevel。 在 实现 它们 
之 前 ， 请 注意 这 可 能 会 给 系统 引入 bug。 之 前 我 们 根据 a11Rows 的 长 度 来 计算 nasNextPage， 但 是 现 
在 allRows 可 以 根据 隐私 设置 被 截断 。 这 凸显 了 高 度 关 注 授权 的 系统 的 复杂 性 。 一 种 简单 的 缓解 方法 
是 直接 从 数据 库 中 读 取 更 多 的 行 ， 即 将 (first + 1) 修 改 为 (first + 10)。 

getFriendshipLevels 的 定义 与 其 他 查询 类 似 : 


const getFriendshipLevels = (nodeId) => { 
const { dbId } = tables.splitNodeld(nodeld); 





























const table = tables.usersFriends; 

let query = table 
.Select(table.star()) 
.where(table.user_id_a.equals(db1d)); 


return database.getSql(query.toQuery()).then((rows) => { 
const levelMap = {}; 
rows. forEach((row) => { 
levelMap[row.user_id_b] = row.1level; 


}); 


return levelMap; 
}93 
及 
最 后 使 用 了 一 个 效率 更 高 的 API 将 rows 数组 转换 为 一 个 对 象 ( 如 果 你 愿意 ， 还 可 以 使 用 单个 
reduce 函数 实现 此 转 掏 。 
最 后 一 部 分 是 canAccessLevel 陈 数 。 因 为 我 们 的 隐私 设置 是 完全 线性 的 ， 所 以 可 以 将 该 设置 表 
示 为 一 个 数组 ， 并 使 用 索引 作为 一 个 简单 的 比较 : 


const canAccessLevel = (viewerLevel, contentLevel) => { 
const levels = ['public', 'acquaintance', 'friend', 'top']; 



































oo 
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const viewerLevelIndex = levels.indexOf(viewerLevel); 
const contentLevelIndex = levels.indexOf(contentLevel); 


return viewerLevelIndex >= contentLevellndex; 
el 
这 看 起 来 还 不 错 , 是 吧 ? 可 以 用 一 些 查 询 来 测试 , 使 用 user1 ( 即 用 
登录 并 运行 以 下 查询 : 























node(id: "users:2") { 


有 户 名 1 和 密码 mypassword1 ) 














在 返回 结果 里 你 将 看 不 到 任何 帖子 。 这 是 因为 context (用 
2 ) 并 不 是 朋友 关系 ， 而 访问 他 们 的 帖子 需要 具有 friend 的 级 别 。 
现在 打开 一 个 无 痕 窗口 ， 以 用 户 5 的 吴 份 登录 并 运行 相同 的 查询 。 你 会 看 到 一 个 帖子 ! 






































{ 
"data": { 
"node": { 
"posts": { 
"edges": [ 
{ 
"node": { 
"id": "posts:3", 
"body": "Hard at work studying for finals..." 
} 
} 
] 
} 
} 
} 
} 




















这 是 因为 用 户 5 实际 上 是 用 户 2 的 朋友 。 
是 一 个 简单 的 示例 ， 但 强调 了 关于 GraphQL 的 两 点 。 


GraphQL 服务 器 库 通常 允许 你 在 某 种 查询 级 别 的 context 中 进行 转发 ; 
GraphQL 模式 代码 本 身 不 应 该 考虑 授权 逻辑 ， 而 应 遵从 底层 数据 代码 。 


























这 
@ 
@ 











户 1 ) 与 我 们 正在 访问 的 节点 ( 
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1 


我 们 从 服务 器 读 取 数据 已 有 一 段 时 间 了 ， 现 在 应 该 尝试 用 变更 来 修改 一 些 数据 了 。 


4.3.3 丰富 的 变更 操作 











如 果 应 用 程序 只 能 从 服务 器 读 取 数 据 ,， 那么 它 能 做 的 就 具有 这 么 多 了 一 一 通常 情况 下 ， 我 们 必须 
上 传 一 些 新 数据 。 回 顾 上 一 章 ， 在 GraphQL 中 ， 我 们 称 这 些 更 新 为 变更 。 








我 们 将 添加 一 个 变更 到 模式 中 ， 它 将 创建 一 个 新 帖子 。 








该 字段 将 具有 一 个 帖子 正文 和 友谊 隐私 级 


别 的 字符 串 参数 ， 它 将 使 我 们 能 够 查询 更 多 关于 所 获取 的 帖子 对 象 的 信息 。 
在 本 章 的 前 面 , 我 们 在 server .js 文件 中 添加 了 一 个 简单 的 键 值 变更 。 让 我 们 更 新 该 定义 ， 以 使 

















有 我 们 期 望 用 于 创建 新 帖子 的 参数 和 类 型 : 








import { GraphQLSchema，GraphQLObjectType，GraphQLS 
GraphQLNonNull, GraphQLID, GraphQLEnumType } from 


const LevelEnum = new GraphQLEnumType({ 
name: " PrivacyLevel '， 
values: { 

PUBLIC: { 

value: " public 


ACQUAINTANCE: { 
value: "acquaintance 


FRIEND: { 
value: 'friend’ 


TOP: { 
value: 'top' 








} 
i 


const RootMutation = new GraphQLObjectType({ 
name: "RootMutation '， 
description: 'The root mutation', 
fields: { 
createPost: { 
type: PostType, 
args: { 
body: { 
type: new GraphQLNonNu1l1(GraphQLString) 
}, 
level: { 
type: new GraphQLNonNull(LevelEnum), 
} 
}, 
resolve(source, args, context) { 
return loaders.createPost(args.body, args 
return loaders.getNodeById(nodeld); 
}); 
} 








tring, 
'graphql', 


.level, context).then((nodeIld) => { 
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} 
} 

}); 

首先 实例 化 了 一 种 新 对 象 ， 即 GraphQLEnumType。 上 一 章 只 是 简要 提 到 了 Enum GraphQL 类 型 ， 
不 过 它 的 工作 方式 与 许多 编程 语言 中 的 枚 举 的 工作 方式 类 似 。 由 于 level 参数 仅 应 是 固定 数量 的 选项 
之 一 ， 因 此 我 们 在 模式 级 别 使 用 枚 举 来 强制 执行 该 约定 。 按 照 约 定 ，GraphQL 中 的 枚 举 应 全 部 大 写 。 

在 创建 好 枚 举 后 ， 我 们 会 在 新 的 createPost 变更 的 args 属性 中 使 用 它 。 注 意 ， 除 了 参数 之 外 ， 
createPost 还 有 一 个 PostType 类 型 ， 这 意味 着 我 们 最 终 需 要 在 执行 了 变更 代码 之 后 返回 一 个 post 
对 象 。 该 工作 实际 上 被 移交 到 一 个 新 的 createPost 加 载 器 ， 如 下 所 示 : 


export const createPost = (body, level, context) => { 
const { dbId } = tables.splitNodeld(context); 
const created_at = new Date().toISOString().split('T')[0]; 
const posts = [{ body, level, created_at, user_id: dblId }]; 






























































let query = tables.posts.insert(posts).toQuery(); 
return database.getSql(query).then(() => { 
return database.getSql({ text: 'SELECT last_insert_rowid() AS id FROM posts' }); 
}).then((ids) => { 
return tables.dbldToNodeld(ids[0] .id, tables.posts.getName()); 
}); 
所 
这 主要 是 针对 SQLite 数据 库 , 但 可 以 想象 出 它 在 其 他 框架 或 数据 存储 中 的 工作 方式 。 我 们 构造 了 
数据 库 行 ， 并 将 其 插入 数据 库 中 ， 然 后 再 检索 新 插入 的 ID。 


如 果 你 打开 了 GraphiQL ， 应 该 能 够 尝试 一 下 这 个 变更 ; 
mutation { 
createPost(body:"First post!", level:PUBLIC) { 
id 
body 
} 
} 
在 实际 情况 下 ， 你 可 能 会 遇 到 更 复杂 的 数据 更 新 场景 ， 如 上 传 文件 。 具 体 细 节 将 取决 于 你 使 用 的 
服务 器 语言 和 库 ， 但 它 受 Relay 和 GraphQL-JS 的 支持 。Relay 文 档 讨 论 了 文件 的 处 理 方式 ， 你 可 以 在 其 
他 地 方 找到 有 关 如 何在 GraphQL 模 式 中 利用 文件 的 示例 "。 


14.3.4 Relay 和 GraphQL 


我 们 开发 的 “Facebook 精简 版 ”模式 可 能 很 小 ， 但 它 应 该 可 以 让 你 了 解 如 何在 GraphQL 服务 器 
中 构造 常用 的 操作 。GraphQL 也 恰好 兼容 Relay，Relay 是 Facebook 的 前 端 React 库 , 可 用 于 GraphQL 
服务 器 。 


除了 发 布 Relay 本 身 之 外 ，Facebook 还 发 布 了 一 个 库 来 帮助 你 更 轻松 地 使 用 Node 来 构建 一 个 与 





















































































































































GD 参见 stack overflow 网 站 文章 “How Would You Do File Uploads in a React-Relay App?”。 
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Relay 兼容 的 GraphQL 服务 器 。 该 GraphQL-Relay-JS 包 减 少 了 我 们 之 前 经 历 过 的 许多 样板 代码 ， 尤 其 
是 在 Relay 的 一 些 更 强大 的 特性 方面 。 

你 应 该 仔细 阅读 文档 中 的 所 有 细节 ， 但 我 们 先 简单 地 转换 一 些 代码 来 使 用 这 个 库 。 首 先 需 要 通过 
npm 安装 它 : 


$ npm install graphql-relay@0.4.1 --save --save-exact 


GraphQL-Relay 对 于 连接 字段 尤其 有 用 。 虽 然 模式 〈posts ) 中 只 有 一 个 连接 字段, 但 可 以 想象 到 ， 
在 更 大 的 应 用 程序 中 重复 每 个 连接 的 类 型 和 代码 会 变 得 非常 麻烦 。 幸 运 的 是 ， 现 在 需要 的 只 是 一 个 快 
速 导 入 : 

import { 

connectionDefinitions 
} from 'graphql-relay'; 
然后 删除 所 有 现 有 的 连接 类 型 ， 这 样 我 们 就 可 以 直接 跳 到 UserType : 


const resolveld = (source) => { 
return tables.dbIdToNodeId(source.id，source._ tableName); 


DB 














export const UserType = new GraphQLObjectType({ 
name: 'User', 


接着 在 最 底部 添加 这 一 行 代 码 来 定义 PostsConnectionType: 


const { connectionType: PostsConnectionType } = connectionDefinitions({ nodeType: Po\ 
stType }); 


它 将 在 内 部 生成 之 前 我 们 手工 创建 的 所 有 类 型 : PageInfo、PostEdge 和 PostConnection。 如 果 
你 加 载 了 GraphiQL 文档 ， 那 么 可 以 进行 确认 ， 见 图 14-5。 











《 User PostConnection x 


A connection to a list of items. 


FIELDS 


pagelnfo: Pagelnfol 
edges: [PostEdge] 














图 14-5 GraphQL Relay 
除了 连接 之 外 ，GraphQL-Relay 库 还 具有 一 些 功能 ， 可 简化 节点 类 型 的 结构 方式 以 及 与 Relay 兼 


容 的 变更 操作 的 使 用 方式 。 我 们 将 在 接 下 来 的 Relay 章节 中 对 此 进行 更 多 的 探讨 ， 不 过 Relay 对 变更 
的 工作 方式 施加 了 一 些 规则 ， 类 似 于 连接 所 需 的 某 些 类 型 和 参数 的 方式 。 
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在 一 般 情况 下 ，Relay 所 需 的 GraphQL 服务 器 变化 都 不 是 针对 GraphQL-JS 或 JavaScript 的 。 任 何 
语言 的 GraphQL 服务 器 都 可 以 与 Relay 兼容 ， 和 希望 本 章 能 让 你 更 加 熟悉 GraphQL 模式 的 基本 构建 块 。 


14.3.5 ”性 能 : N+1 个 查询 
既然 模式 已 稳定 , 我 们 可 以 重新 考虑 一 下 性 能 。 在 深入 讨论 之 前 , 请 记 住 不 同 产品 的 性 能 需求 可 能 
是 完全 不 同 的 。 工 程 师 应 该 仔细 考虑 编写 性 能 更 高 的 代码 的 成 本 和 收益 以 及 带 来 额外 复杂 性 的 风险 。 
让 我 们 考虑 这 样 一 个 查询 : 
{ 


node(id:"users:4") { 
. on User { 
friends { 
edges { 
































在 底层 ,我 们 当前 的 GraphQL 解析 代码 将 触发 一 个 数据 库 查 询 来 获取 "users:4" 的 节点 , 一 个 查 
询 来 获取 好 友 ID 列表 ， 以 及 每 个 friends 边 的 W 个 数据 库 查 询 。 这 通常 被 称 为 N+1 查询 问题 ， 可 以 
使 用 Web 框架 或 ORM 轻松 实现 。 可 以 想象 对 于 一 个 缓慢 的 数据 库 或 具有 大 量 边 的 查询 ， 这 会 导致 性 
能 下 降 。 可 以 使 用 以 下 原生 SQL 对 该 查询 进行 可 视 化 : 


SELECT "Users".* FROM "users" WHERE ("users"."id" = 4) LIMIT 1 

SELECT "users_friends"."user_id_b" FROM "users_friends" WHERE ("users_friends"."user\ 
_id_a" = 4) 

SELECT "users".* FROM "users" WHERE ("users"."id" = 1) LIMIT 1 

SELECT "Users".* FROM "users" WHERE ("users"."id" = 3) LIMIT 1 

SELECT "Users".* FROM "users" WHERE ("users"."id" = 2) LIMIT 1 


在 理想 的 情况 下 ， 只 需 两 个 数据 库 查 询 即 可 : 一 个 用 于 检索 初始 节点 ， 另 一 个 用 于 检索 所 有 好 友 
(或 在 我 们 需要 的 分 页 限制 内 )。 换 句 话 说， 我们 为 所 有 好 友 批 量 处 理 查询 ， 如 下 所 示 : 

SELECT "Users".* FROM "users" WHERE ("users"."id" = 4) LIMIT 1 

SELECT "users_friends"."user_id_b" FROM "users_friends" WHERE ("users_friends"."user\ 

:Td ars) 

SELECT "Users".* FROM "users" WHERE ("users"."id" in (1, 3, 2)) LIMIT 3 

考虑 一 下 加 载 用 户 的 工作 方式 : 它 是 对 loaders .getNodeById 的 调用 , 目前 , 该 函数 会 立即 触发 
一 个 数据 库 查 询 , 但 如 果 我 们 可 以 “等 待 ”一 段 时 间 ， 收 集 需 要 加 载 的 节点 了 ,然后 触发 类 似 于 上 面 
的 数据 库 查 询 , 那 该 怎么 办 呢 ?GraphQL 和 JavaScript 为 批量 处 理 类 似 的 查询 提供 了 直观 的 技术 支持 ， 
我 们 将 对 此 进行 实现 。 














































































































14.3 ”连接 S11 











Facebook 维护 了 一 个 名 为 DataLoader 的 库 来 提供 帮助 ， 它 是 独立 于 React 或 GraphQL 的 通用 
JavaScript 库 。 可 以 使 用 该 库 来 创建 加 载 器 ， 这 些 加 载 器 是 自动 批量 提取 相似 数据 的 对 象 。 例 如 ， 可 
以 实例 化 一 个 UserLoader 来 从 数据 库 中 加 载 用 户 : 

const UserLoader = new DataLoader((userIds) => { 

const query = table 


.Select(table.star()) 
.Where(table.idq.in(userIds ) ) 


.toQuery( ); 























return database.getSql(query .toQuery( ) ) ; 
}); 


// 可 以 在 任何 地 方 加 载 单个 用 户 
function resolveUser(userId) { 
return UserLoader .1oad(userId) ; 


} 

请 注意 ，UserLoader . 10ad 将 单个 userId 作为 参数 ， 但 其 内 部 函数 的 参数 是 userIds 数组 。 
这 意味 着 如 果 我 们 从 多 个 位 置 快速 连续 地 调用 UserLoader .1oad， 则 可 以 选择 创建 更 有 效 的 数据 库 
查询 。 

在 我 们 的 应 用 程序 中 , 大 多 数 代码 涉及 loaders .getNodeById， 这 使 其 成 为 自动 批 处 理 的 理想 选 
择 。 调 用 getNodeById 的 代码 无 须 修改 ; 相反 ， 我 们 将 使 用 DataLoader 在 内 部 批量 提取 节点 。 

首先 ， 从 npm 安装 DataLoader : 

$ npm install dataloader@1.2.0 --save --save-exact 

下 面 来 看 一 下 对 loaders . js 的 更 改 。 我 们 将 为 每 个 表 制 作 一 个 数据 加 载 器 ， 这 是 开始 优化 的 一 
种 合理 方法 ， 代 码 如 下 所 示 : 


import * as database from './database'; 
import * as tables from './tables'; 












































import DataLoader from 'dataloader'; 


const createNodelLoader = (table) => { 
return new DataLoader((ids) => { 
const query = table 
.select(table.star()) 
.where(table.id.in(ids)) 
.toQuery( ); 


return database.getSql(query).then((rows) => { 
rows. forEach((row) => { 
row._ tableName = table.getName( ); 
}); 
return rows; 
}); 
BE 
}; 
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createNodeLoader 是 一 个 工厂 函数 , 它 返回 DataLoader 的 一 个 新 实例 。 我 们 创建 了 一 个 SELECT 
* FROM $TABLE WHERE ID IN($IDS ) 的 查询 ， 它 允许 我 们 使 用 一 个 查询 来 选择 多 个 节点 。 


现在 需要 调用 该 工厂 函数 ， 并 将 其 存储 在 一 个 常量 中 : 


const nodeLoaders = { 
users: createNodeLoader(tables.users), 
posts: createNodeLoader(tables.posts), 
usersFriends: createNodeLoader(tables.usersFriends), 


}; 
最 后 将 getNodeById 的 定义 改 为 使 用 对 应 的 加 载 器 : 
export const getNodeById = (nodeId) => { 


const { tableName, dblId } = tables.splitNodeId(nodeId ) 
return nodeLoaders [tableName] .1o0ad(db1d); 


}> 
如 果 打 开 GraphiQL 并 尝试 执行 此 查询 ， 你 会 注意 到 服务 器 控制 台中 的 SQL 日 志 正 在 适当 地 批 处 
理 数 据 库 数据 的 获取 操作 : 

{ 


user3: node(id:"users:3") { 
id 
} 
user4: node(id:"users:4") { 
id 
} 
} 















































$ node index.js 

{ starting: true } 

{ running: true } 

SELECT "users".* FROM "users" WHERE ("users"."id" IN ($1, $2)) 

[ '3', '4' ] 

注意 ,高 层次 的 GraphQL 模式 代码 完全 不 知道 这 种 优化 ， 也 无 须 进行 修改 。 通 常情 况 下 ,你 应 该 


倾向 于 在 加 载 器 和 数据 服务 级 别 上 进行 优化 ， 以 便 所 有 使 用 者 都 能 享受 到 这 些 好 处 。 
DataLoader 是 一 个 简单 但 功能 强大 的 工具 。 虽 然 我 们 只 展示 了 它 的 批 处 理 功能 ， 但 它 也 可 以 作为 
缓存 使 用 。 如 果 你 想 了 解 更 多 信息 ， 请 查看 其 文档 "并 考虑 观看 其 维护 人 员 发 表 的 演讲 >。 

































































14.4 ”总 结 


本 章 介绍 了 很 多 基础 知识 。 我 们 设计 了 一 个 模式 , 并 从 零 开始 创建 了 一 个 GraphQL 服务 器 ,接着 
将 其 连接 到 一 个 关系 数据 库 ， 最 后 研究 了 一 些 性 能 优化 。 不 管 你 的 生产 语言 和 技术 栈 是 什么 ， 这 些 概 


























GD 参见 GitHub 网 站 的 graphql/dataloader 页 面 。 
@) 参见 YouTube 网 站 视频 “DataLoader 一 Source Code Walkthrough”。 
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念 都 适用 于 所 有 的 GraphQL 服务 器 实现 。 此 外 ， 这 将 使 你 在 从 前 端 连接 到 GraphQL 服务 器 时 获得 更 
多 的 理解 和 上 下 文 环境 。 


本 章 使 用 了 Facebook 维护 的 GraphQL-JS 库 , 但 GraphQL 生态 系统 正在 呈 爆 炸 式 增长 。 以 下 是 你 








可 能 想 要 探索 的 更 流行 的 选择 和 技术 : 


Ruby 版 的 GraphQL; 

Python 版 的 Graphene; 

Scala 版 的 Sangria; 

Node 版 的 Apollo 服务 器 ; 

Node 和 MongoDB 版 的 Graffiti-Mongoose; 

用 于 托管 GraphQL 服务 器 的 Reindex 和 Graphcool 等 服务 。 


既然 我 们 已 了 解 了 如 何 使 用 GraphQL 和 编写 GraphQL 服务 器 ， 是 时 候 综合 到 目前 为 止 介 绍 的 所 
有 内 容 ， 并 学 习 有 关 Relay 的 知识 了 。 











经 典 Relay 








15.1 介绍 


注 : 本 章 介绍 的 是 经 典 Relay。 

本 章 将 帮助 你 了 解 使 用 现代 Relay 的 心智 模型 ， 其 中 一 些 API 已 发 生变 化 。 从 2018/2019 年 起 ， 
我 们 建议 使 用 Apollo， 因 为 它 是 Relay 的 绝 佳 替代 品 。 

如 果 你 有 兴趣 将 本 章 转换 为 Apollo， 成 为 本 书 的 贡献 者 ， 请 与 我 们 联系 “。 

在 CS (Client-Server ) 架构 的 Web 应 用 程序 中 选择 正确 的 数据 架构 可 能 比较 困难 。 当 你 试图 实现 
一 个 数据 架构 时 ， 需 要 做 出 非常 多 的 决策 。 例 如 : 

@ 如 何 从 服务 器 获取 数据 ? 
如 果 数 据 获 取 失 败 ， 该 怎么 办 ? 
如 何 查 询 数据 之 间 的 依赖 和 关联 关系 ? 
妇 
妇 





娃 






































[何在 整个 应 用 程序 中 保持 数据 一 致 ? 
0 何 防 止 开发 人 员 不 小 心 破坏 彼此 的 组 件 ? 
如 何 更 快 地 编写 特定 于 应 用 程序 的 功能 ， 而 不 是 花 时 间 从 服务 器 来 回 推送 数据 ? 

值得 庆幸 的 是 ，Relay 对 所 有 这 些 问 题 都 有 自己 的 理论 。 而 且 它 是 该 理论 的 一 种 实现 ， 一旦 你 创 
建 了 它 ， 使 用 起 来 就 是 一 种 乐趣 。 因 此 你 自然 会 问 : 到 底 什 么 是 Relay? 

Relay 是 一 个 将 React 组 件 连 接 到 API 服务 器 的 库 。 

我 们 在 本 书 前 面 已 讨论 过 GraphQL ， 但 现在 还 不 清楚 Relay、GraphQL 和 React 之 间 的 关系 。 可 
以 将 Relay 看 作 GraphQL 和 React 之 间 的 秋 合 剂 。 

Relay 之 所 以 出 色 ， 是 因为 : 

e@ 组 件 声明 它们 需要 操作 的 数据 ; 

@ 它 管理 如 何以 及 何 时 获取 数据 ; 

@ 它 智能 地 聚合 查询 ， 因 此 不 会 获取 超出 所 需 内 容 的 数据 ; 



























































Qa 邮箱 nate@fullstack.io。 

















e@ 它 为 我 们 提供 了 清晰 的 模式 来 导航 对 象 之 间 的 关系 并 对 其 进行 变更 。 
在 本 章 中 , 我 们 将 看 到 关于 Relay 最 有 用 的 功能 之 一 是 GraphQL 查询 与 组 件 位 于 同一 位 置 。 这 提 
供 了 一 个 好 处 ， 即 可 以 清楚 地 看 到 直接 在 组 件 旁 边 泻 染 该 组 件 所 需 的 值 的 说 明 。 
每 个 组 件 都 指定 它 需 要 什么 ,然后 Relay 会 在 进行 查询 之 前 确定 是 否 存在 重复 .Relay 会 聚合 查询 、 
处 理 响应 ， 接 着 会 将 请 求 的 数据 返回 给 每 个 组 件 。 
GraphQL 可 以 独立 于 Relay 使 用 。 从 理论 上 讲 ， 我 们 可 以 创建 一 个 GraphQL 服务 器 来 拥有 想 要 的 模 
式 。 然 而 ,Relay 有 一 个 GraphQL 服务 器 必须 遵循 的 规范 ， 以 便 与 Relay 兼容 。 我 们 将 讨论 这 些 约 束 条 件 。 
15.1.1 本章 会 涵盖 的 内 容 
这 一 章 将 逐步 介绍 如 何在 客户 端 应 用 程序 中 设置 和 使 用 Relay。 
Relay 依赖 于 GraphQL 服务 器 ， 我 们 已 在 示例 代码 中 提供 了 它 ， 但 不 打算 讨论 该 服 
务 器 的 实现 细节 。 
本 章 内 容 如 下 : 
解释 Relay 的 各 种 概念 ; 
描述 如 何在 应 用 程序 中 设置 Relay (使 用 路 由 ); 
演示 如 何 从 Relay 中 获取 数据 到 组 件 中 ; 
演示 如 何 使 用 变更 来 更 新 服务 器 上 的 数据 ; 
重点 介绍 有 关 Relay 的 技巧 和 容 门 。 
学 完 本 章 ， 你 会 了 解 什么 是 Relay 以 及 如 何 使 用 它 ， 并 为 将 Relay 集成 到 你 自己 的 应 用 程序 打下 
坚实 的 基础 。 


15.1.2 我们 正 构 建 的 内 容 
1. 客户 端 
本 章 将 构建 一 个 简单 的 书店 。 它 有 三 个 页 面 。 
e@ 图 书 列表 页 面 ， 其 中 显示 了 要 出 售 的 所 有 图 书 ( 见 图 15-1 )。 




























































































A 


S16 外 


15 章 


经 典 Relay 





© © @ ， 图 FulstackReact Relay Books! xi 


nate@fullstack.. 





€ CG © localhost:3000/#/ 


Bookstore Demo 


JavaScript Books 


ng-book 


The Complete Book on Angularjs 





人 | : 





GAUTHORS 1AUTHOR 4AUTHoRS 
Fullstack React ng-book classic ng-book 
The Complete Book on ReactJS and The Complete Book on AngularJS The Complete Book on Angular 2 
Friends 

Learn Angular 1 wth this classic ng-book is the easiest way to learn 
Bulld awesome apps in React in book. Angular. 


record time. 





图 15-1 书店 页 面 





面 ， 其 中 显示 作者 的 信息 以 及 他 们 撰写 的 图 


书 ( 见 图 15-2 )。 








©90 ， 图 Fulstack React Relay books x nate@fullstack... 
€ GC | © localhost:3000/#/authors/5878f70787e6b58e180f9fbO 冯 
Bookstore Demo 


Nate bio 





Nate Murray :… 





图 15-2 作者 页 面 
e@ 图 书 清单 页 面 ， 其 中 显示 一 本 书 和 该 书 的 作者 。 还 可 以 在 此 页 画 


这 里 的 数据 模型 很 简单 : 一 本 书 有 ( 且 属 于 ) 许多 作者 。 
这 些 数据 通过 API 服务 器 提供 给 应 用 程序 。 








i 上 编辑 ( 见 图 15-3 )。 
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©@0 FulstackReact:RelayBookst x nate@fullstack... 


GC @ localhost:3000/#/books/fullstack-react 会 | 大 


Bookstore Demo 


Fullstack React 


The Complete Book on ReactJS and Friends 


Build awesome apps in React in record time, with the best book ever to have 
dolphins on the cover| 


Authors 





Ari Lerner Nate Murray Anthony 


图 15-3 书 清单 页 面 


2. 服务 器 端 
我 们 已 在 这 个 应 用 程序 的 示例 代码 中 提供 了 一 个 与 Relay 兼容 的 GraphQL 演示 服务 器 。 本 章 不 打 
算 讨 论 服 务 器 的 实现 细节 。 如 果 你 对 构建 GraphQL 服务 咒 感 兴趣 ， 参 见 第 14 章 。 
































这 个 服务 器 是 使 用 graffiti-mongoose 库 创建 的 。 如 果 你 使 用 的 是 MongoDB 和 
mongoose， 那 么 graffiti-mongoose 是 使 你 的 模型 适应 GraphQL 的 绝 佳 选 择 。 
graffiti-mongoose 会 使 用 你 的 mongoose 模型 ， 并 自动 生成 一 个 Relay 兼容 的 
GraphQL 服务 器 。 
也 就 是 说 ， 有 一 些 库 可 以 帮助 你 从 模型 中 为 每 种 流行 语言 生成 GraphQL 。 检 查 
awesome-graphql 列表 来 查看 哪个 库 是 可 用 的 。 
. 尝试 运行 该 应 用 程序 

可 以 在 下 载 好 的 代码 里 的 relay 文件 夹 中 找到 本 章 的 项 目 : 

$ cd relay/bookstore 

我 们 已 包含 了 完整 的 服务 器 和 客户 端 。 在 运行 它们 之 前 ， 需 要 在 客户 端 和 服务 器 上 都 运行 npm 

install 命令 : 
npm install 


$ 

$ cd client 
$ npm install 
$ 


a I 


接 下 来 ， 可 以 在 两 个 单独 的 选项 卡 中 分 别 运 行 它们 : 


人 参见 GitHub 网 站 的 chentsulin/awesome-graphql 页 面 。 
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## 
$ 
## 
$ 


选项 卡 一 
npm run server 
选项 卡 二 


npm run client 














或 者 使 用 我 们 提供 的 一 个 便捷 命令 来 运行 它们 : 


$ npm start 


当 它 们 运行 时 ， 我 们 应 该 能 够 通过 http://localhost:3661 访问 GraphQL 服务 器 ， 并 
http://1localhost:3880 访问 客户 端 应 用 程序 。 




















了 


通过 


在 本 章 中 ， 我 们 将 花 时 间 在 浏览 器 中 查看 客户 端 和 服务 器 。 我 们 已 在 此 演示 服务 器 上 安装 了 
GraphQL GUI 工具 “GraphiQL ”。 
Relay 是 基于 GraphQL 的 ， 为 了 更 好 地 了 解 它 的 工作 方式 ， 我 们 将 在 此 GraphiQL 界面 中 “手动 ” 
运行 一 些 查 询 。 


4. 如 何 使 用 本 章 


虽然 我 们 将 介绍 Relay 的 所 有 术语 ， 但 本 章 旨 在 作为 使 用 Relay 的 指南 ， 而 不 是 API 文档。 














在 阅读 本 章 时 ， 请 随时 参考 Relay 网 站 的 官方 文档 以 深入 了 解 细节 。 


先决 条 件 

这 是 一 个 高 级 章节 。 我 们 将 专注 于 使 用 Relay， 而 不 是 重新 介绍 编写 React 应 用 程 
序 的 基础 知识 。 假 设 你 对 编写 组 件 、 使 用 props、JSX 以 及 加 载 第 三 方 库 都 比较 熟 
悉 。Relay 还 需要 GraphQL， 因 此 我 们 还 假设 你 对 GraphQL 也 有 一 定 的 了 解 。 


如 果 你 对 这 些 内 容 还 不 熟悉 ， 本 书 前 面 有 介绍 。 


Relay 1 

目前 本 章 介 绍 的 是 Relay lx 版本。 但 现在 有 一 个 新 版 本 的 Relay 正在 准备 中 ， 不 过 
请 不 要 让 这 阻止 你 学 习 Relay 1。 新 版 本 还 没有 公开 发 布 日 期 ,但 Facebook 员工 Jaseph 
Savona 在 GitHub 上 表示 ，Relay 2 具有 “明显 的 API 差异 ,但 核心 概念 是 相同 的 ， 
且 API 的 变化 会 使 Relay 变 得 更 简单 ， 更 可 预测 ”。 

这 里 有 个 好 消息 是 底层 的 GraphQL 规 范 没有 改变 。 因 此 ，Relay 将 在 未 来 推出 v2  ， 
但 我 们 仍 可 在 生产 应 用 程序 中 使 用 Relay 1。 

如 果 你 对 未 来 的 Relay 更 感 兴趣 ,请 查看 React 网 站 “Relay: State ofthe State” 一 文 。 


15.1.3 ”代码 结构 指南 
本 章 在 relay/bookstore 文件 夹 中 提供 了 应 用 程序 的 完整 版 本 。 


为 了 将 概念 拆 分 成 更 易于 理解 的 片段 ,我 们 将 一 些 组 件 拆 分 为 几 个 步骤 。 我 们 已 将 这 些 9 








包含 在 relay/bookstore/client/steps 文件 夹 中 了 。 





Qa 翻译 本 书 时 Relay 2 已 经 发 布 。 一 一 译 者 注 





P 间 文件 
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我 们 的 Relay 应 用 程序 包含 一 个 服务 器 、 一 个 客户 端 和 几 个 构建 工具 ， 所 有 这 些 加 起 来 就 构成 了 
相当 多 的 文件 和 目录 。 以 下 是 你 在 项 目 中 可 以 找到 的 一 些 目录 和 文件 的 简要 概述 ( 如果 你 不 熟悉 这 些 
内 容 ， 请 不 要 担心 ， 本 章 将 解释 你 需要 了 解 的 所 有 内 容 ): 





-- bookstore 
1-- README .md 
1-- client 
| -- config // 客户 端 配置 
-- babelRelayPlugin.js // 通用 babel 插件 
-- Webpack.config.dev.js // webpack 配置 


`“-- webpack.config.prod.js 

-- package.json 

-- public // 图 像 和 index.html 
-—— images/ 

*—— index.html 

-- scripts // 辅助 脚本 

-- build.js 

—— Start.js 

`“-- test.js 








| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| -— components // 组 件 位 置 
| |-- App.js 

| |-- AuthorPage .js 

| 1-- BookItem. js 

| |-- BookPage .js 

| |-- BooksPage . js 

| |-- FancyBook .js 

| `“-- TopBar .js 

| -= data // graphql 元 数据 
| |-- schema.graphql 

| `“-- schema. json 

| 
| 
| 
| 
| 





-- index.js 
-- _ mutations // 变更 用 于 和 触发 修改 
`“-- UpdateBookMutation. js 

|-- routes .js // 我 们 的 routes 

|-- steps/ // 中 间 文 件 
| `“-- styles // css 样式 
|-- models.js // 服务 器 模型 
|-- package. json 
|-- schema. js // 服务 器 痛 的 graphql 模式 
1-- server .js // 服务 器 定义 


1-- start-client.js 
1-- start-server .js 
`“-- tools 


`-- update-schema. js // 用 于 生成 模式 的 辅助 脚本 


你 可 以 随意 查看 我 们 提供 的 示例 代码 ， 但 现在 还 不 需要 了 解 每 个 文件 。 我 们 将 介绍 所 有 重要 的 15 
部 分 。 
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15.2 Relay 是 一 个 数据 架构 


Relay 是 一 个 在 客户 端 运 行 的 JavaScript 库 。 可 以 将 Relay 连接 到 React 组 件 ， 然 后 Relay 会 从 服 
务 器 获取 数据 。 当 然 ， 服 务 器 也 需要 遵循 Relay 的 协议 ， 我 们 也 将 对 此 进行 讨论 。 

Relay 被 设计 为 React 应 用 程序 的 数据 框架 。 这 意味 着 在 理想 情况 下 ,我 们 将 使 用 Relay 来 加 载 所 
有 数据 ， 并 维护 应 用 程序 的 主要 状态 以 及 授权 状态 。 

因为 Relay 有 自己 的 存储 ， 所 以 它 能 够 缓存 数据 并 有 效 地 解决 查询 。 如 果 你 有 两 个 涉及 同一 数据 
的 组 件 ， 那 么 Relay 将 把 这 两 个 查询 组 合成 一 个 查询 ， 然 后 将 适当 的 数据 分 发 给 每 个 组 件 。 这 样 做 的 
好 处 是 最 小 化 我 们 需要 从 服务 器 调用 的 数量 ， 但 它 仍 允许 各 个 组 件 能 够 在 本 地 指定 它们 需要 的 数据 。 

因为 Relay 自己 持 有 一 个 数据 中 央 存 储 , 这 意味 着 它 与 其 他 持 有 中 央 存 储 的 数据 架构 ( 如 Redux ) 
并 不 真正 兼容 。 你 不 能 有 两 个 中 央 状 态 存 储 ， 因 此 这 使 得 当前 版 本 的 Redux 和 Relay 基本 上 不 兼容 。 
















































































Apollo 

如 果 你 已 在 使 用 Redux， 但 是 想 尝 试 使 用 Relay， 那 么 仍 有 希望: Apollo 项 目 是 一 个 
受 Relay 启发 的 基于 Redux 的 库 。 如 果 你 足够 谨慎 ， 可 以 将 Apollo 改装 到 现 有 的 
Redux 应 用 程序 中 。 


本 章 不 会 讨论 Apollo， 但 它 是 一 个 很 棒 的 库 ， 绝 对 值得 你 去 研究 它 。 


15.3 Relay 和 GraphQL 约定 


我 们 需要 浴 清 的 一 件 事 是 Relay 和 GraphQL 之 间 的 关系 。 

GraphQL 服务 器 定义 了 GraphQL 模式 以 及 如 何 根据 该 模式 解析 查询 .GraphQL 本 身 允 许 你 定义 各 
种 各 样 的 模式 。 在 大 多 数 情况 下 ， 它 并 不 决定 模式 的 结构 。 

Relay 在 GraphQL 之 上 定义 了 一 组 约定 。 为 了 使 用 Relay, 人 和食 的 GraphQL 服务 器 必须 遵循 一 组 特 
定 的 指导 原则 。 

概括 来 说 ， 这 些 约定 如 下 所 示 : 

(1) 一 种 通过 ID 获取 任何 对 象 的 方法 (无论 类 型 如 何 ); 

(2) 一 种 通过 分 页 遍历 对 象 之 间 的 关系 〈 称 为 “连接 ”) 的 方法 ; 

(3) 一 种 围绕 着 数据 变化 的 结构 ( 使 用 变更 )。 

这 三 个 要 求 使 我 们 能 够 构建 复杂 、 高 效 的 应 用 程序 。 本 章 将 具体 介绍 这 些 通用 的 指导 原则 。 

让 我 们 直接 在 GraphQL 服务 器 上 探索 这 三 种 Relay 约定 的 实现 。 然后， 本 章 稍 后 将 在 客户 端 应 用 
程序 中 实现 它们 。 

































































@ Relay 规范 官方 文档 
可 以 查看 有 关 Relay/GraphQL 规范 的 Facebook 官方 文档 。 
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15.3.1 探索 GraphQL 中 的 Relay 约 定 
请 确保 你 已 运行 了 如 上 所 述 的 GraphQL 服务 器 ， 并 在 浏览 禹 中 打开 地 址 1ocalhost:3861 。 


请 记 住 ，GraphiQL 会 读 取 模 式 并 提供 一 个 文档 浏览 器 来 导航 这 些 类 型 。 单 击 GraphiQL 中 的 
“Docs” 链 接 以 显示 模式 的 “ 根 类 型 ”( 见 图 15-4 )。 























A GraphQL schema provides a root type tor each 
kind of operation. 


ROOT TYPES 





QUERY VARIABLES 





图 15-4 ” 带 有 文档 的 GraphiQL 接口 











15.3.2 ”通过 ID 获取 对 象 
在 服务 器 中 有 两 个 模型 : Author 和 Book。 我 们 要 做 的 第 一 件 事 是 根据 ID 来 查找 特定 的 对 象 。 
假设 我 们 想 要 创建 一 个 显示 特定 作者 信息 的 页 面 。 我 们 可 能 有 一 个 URL, HH /authors/abc123， 
其 中 abc123 是 作者 的 中。 我 们 希望 Relay 去 询问 服务 器 “ID 为 abc123 的 作者 的 信息 是 什么 ? ”在 
这 种 情况 下 ， 我 们 将 使 用 GraphQL 查询 ( 即将 在 下 面 定 义 )。 
然而 ， 目 前 有 一 个 鸡 生 蛋 还 是 蛋 生 鸡 的 问题 : 我 们 不 知道 任何 记录 的 ID。 
因此 ， 让 我 们 加 载 作 者 的 names 和 igs 的 整个 列表 ， 然 后 记录 下 其 中 一 个 ID。 
在 GraphiQL 中 输入 以 下 查询 : 
query { 
authors { 
id 
name 


} 
} 


然后 点 击 运行 按钮 ( 见 图 15-5 )。 
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© /mM localhost:3001/graphqrauer, x nate@tullstack... 
€ 3 © © localhost:3001/graphql?query=query%20%78%0A%20%20authors%20%7B%0A%20%20%20%20id%0A%20%20%20%20name... 合 | 
GraphiQL Pp Prettify 《 Docs 


query { 
authors { 
id 






nane 
} Vea69yOn2jMjkyYnQ3ZOVwANz EANTh jMeQW2 jkANQ==" 
"Ar Lerner” 


Ce 
“1d": "QXVea69yOnTzOTY2NDVnaZnZiZWIxMzcSNTEwYMIXZE=="， 


“name": “Nate Murray” 


“1d": "QXVga69y0jdlMDRKkYTB4Y2IiOGNjOTMz2YzdiODlmYE=-"， 
“name": “Felipe Coury" 


} 

{ 
“id": "QXVea69yOnRJNTKSYTkSNzImZGUzMDQ1ZGFiNTIkYE==", 
“name": "Carlos Tabourda" 

} 

{ 
"id": "QXV6a69yOjY12m]17jA1ZTAxZnmFjMzkwY2TzZmEwNw=="， 
"name": "Anthony Accomazza" 


"1d": "QXVGa69yO0jAxXNTOQWZjMxOWZmMGNmODgSMjhjODNkZQ==", 
“name": "Clay Allsopp” 











xveas9yOJE3MjUyMnVjMTAYOGFiNzgxZD1kZ2mQxNw==" , 
”David Guttman” 


ixXVea69yOmNjYjRhOTEzMGYzOWNJNTU3NTU4YjJkyNA==”， 
"Tyler McGinnis” 


] 
QuERY VARIABLES } 


一 





图 15-5”GraphiQL 中 带 有 ID 的 作者 


现在 有 了 一 个 作者 ID ， 我 们 就 可 以 查询 以 获得 具有 特定 ID 的 author 对 象 : 
查询 : 


query { 
author(id: "QXVOaG9yOjY1ZmJ1ZjA1ZTAxZmF jMzkwY2IzZmEwNw==") { 


id 
name 








响应 : 


{ 
"data": { 
"author": { 
"id": "QXVOaG9y0jY12mJ12jA12TAX2ZmF jMzkwY21zZmEwNw=="，, 
"name": "Anthony Accomazzo" 


} 
} 
} 


虽然 这 很 方便 ,但 在 author 查询 中 我 们 只 能 接收 类 型 为 Author 的 对 象 ， 因 此 它 不 能 满足 Relay 
规范 的 要 求 。Relay 规范 说 ， 我 们 需要 一 种 通过 node 查询 来 查询 任何 对 象 (Node ) 的 方法 。 
本 章 稍 后 将 详细 讨论 GraphQL 模式 ， 但 值得 指出 的 是 ，Author 和 Book 类 型 都 实现 
了 Node-type 接口 。 


我 们 已 实现 了 在 服务 器 上 通过 node 查找 Node 对 象 的 功能 ， 因 此 让 我 们 来 尝试 一 下 。 首先 只 查询 
node 的 id: 
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查询 : 


query { 
node(id: "QXVOaG9yOjY1ZmJ1ZjA1ZTAxZmF jMzkwY2IzZmEwNw==") { 
id 
} 
} 


响应 : 


{ 
"data": { 
"node": { 
"id": "QXVOaG9yOjY1ZmJ1ZjA1ZTAxZmF jMzkwY21zZmEwNw==" 
} 
} 
} 























这 个 可 以 正常 工作 ! 但 它 不 是 很 有 用 ， 因 为 我 们 没有 获取 到 关于 作者 的 任何 其 他 数据 。 下 面 尝试 
获取 名 称 : 


查询 : 


query { 
node(id: "QXV@aG9y0jY12ZmJ1ZjA1ZTAxZmF jMzkwY2IzZmEwNw==") { 
id 
name 
} 
} 


这 样 会 失败 并 会 显示 以 下 错误 : 





Cannot query field "name" on type "Node". Did you mean to use an inline fragment on \ 
"Author" or "Book"? 








这 到 底 发 生 了 什么 呢 ? 因为 Node 是 泛 型 类 型 ， 所 以 我 们 不 能 查询 name 字段 。 相 反 , 需要 提供 
个 片段 ， 它 表示 : 如 果 我 们 查询 一 个 Author ， 则 返回 Author 特定 的 字段 。 因 此 可 以 调整 查询 ， 如 下 
所 示 。 

查询 ， 


query { 


node(id: "QXVOaG9yOjY1ZmJ1ZjA1ZTAxZmF jMzkwY2IzZmEwNw==") { 
id 











. on Author { 
name 


} 
} 
} 


响应 : 


{ 
"data": { 
"node": { 
"id": "QXVOaG9yOjY1ZmJ1ZjA1ZTAxZmF jMzkwY21zZmEwNw=="， 
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"name": "Anthony Accomazzo" 
} 
} 
} 


























可 以 正常 工作 了 ! 可 以 使 用 ID 来 获取 作者 。 这 里 的 关键 思想 是 ， 可 以 通过 使 用 ID 来 查询 node 
( 这 是 Relay 的 要 求 )， 从 而 查询 系统 中 的 任何 对 象 。 例 如 ， 如 果 有 一 个 Book ID ， 则 可 以 使 用 node 查 
询 来 查找 图 书 。 





这 里 一 个 有 用 的 练习 是 尝试 使 用 node 通过 ID 查找 Book。 提 示 : 你 需要 使 用 ... on 
Book 语法 在 Book 上 添加 一 个 片段 ， 然 后 指定 要 检索 的 Book 字段 。 


个 全 局 唯一 ID 
这 里 的 含义 是 ， 实 际 上 每 个 对 象 都 有 一 个 全 局 唯一 的 ID。 例如， 如 果 你 使 用 传统 的 
SQL 数据 库 ( 如 Postgres ), 并 对 每 个 表 使 用 自 增 的 ID, 那么 可 能 有 ID 为 2 的 Author 
和 了 JD 为 2 的 Book。 该 如 何 解决 这 个 问题 呢 ? 


GraphQL 服务 器 解决 了 此 问题 。 其 思想 是 你 必须 提出 一 种 约定 ， 例 如 将 表 名 和 数字 
ID 睹 入 GUID 中 。 然 后 你 的 GraphQL 服务 器 将 对 这 些 ID 进行 编码 和 解码 。 


实际 上 ， 我 们 提供 的 服务 器 正在 发 生 这 种 情况 。 你 可 能 已 注意 到 ， 模 式 模型 中 同时 
具有 一 个 id 字段 和 一 个 _id 字段 。 有 什么 区 别 呢 ? 


_id 字段 是 MongoDB ID; id 字段 是 Relay GUID ， 它 是 表 名 和 _id 字段 的 组 合 。 
Relay 使 用 node 接口 来 重新 获取 对 象 。 在 编写 应 用 程序 时 , 我们 可 以 有 几 十 种 方式 来 加 载 各 种 对 


象 。node 接口 背后 的 思想 是 提供 一 种 一 致 的 、 简 单 的 方法 ， 让 Relay 询问 服务 器 :“ 给 定 这 个 ID， 这 
个 对 象 的 当前 值 是 多 少 ? ” 


我 们 现在 可 以 查询 单个 Nodes, 接 下 来 需要 讨论 如 何 遍历 它们 之 间 的 关系 了 。 在 示例 应 用 程序 
我 们 将 在 主页 上 显示 一 个 图 书 列表 ， 并 希望 能 够 加 载 撰写 该 书 的 作者 。 


在 Relay 中 ， 我 们 将 通过 使 用 连接 来 指示 Author 和 Book 之 间 的 关系 。 
15.3.3 ”解读 连接 

一 个 作者 可 能 贡献 了 好 几 本 书 。 

你 如 果 熟 悉 传 统 的 关系 数据 库 ， 或 许可 能 已 经 见 过 这 种 关系 的 建 模 方 法 : 

e@ 一 个 authors 表 ， 它 具有 一 个 id 字段 ; 

e@ 一 个 books 表 ， 它 具有 一 个 id 字段 ; 


@ 一 个 authorships 表 ， 其 中 包含 一 个 author_id 字段 和 一 个 book_id 字段 。 























Ll 















































在 这 个 场景 中 ， 对 于 每 个 Author/Book 对 ， 你 将 创建 这 个 新 的 “连接 模型 "*， 称 为 Authorship， 
它 表 示 为 特定 Book 做 出 贡献 的 Author。 这 种 思想 有 时 被 称 为 “多 对 多 关系 ”。 


类 似 地 ，Relay 还 定义 了 一 个 “连接 模型 "， 用 来 表示 两 个 模型 之 间 的 关系 。 确 切 地 说 ，Relay 指 
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定 了 以 下 两 者 : 

(D“ 连 接 ” 模 型 ， 用 于 指定 两 个 模型 之 间 的 关系 ， 并 保存 分 页 数据 ; 

CC)“ 边 ”模型 ， 用 于 包装 特定 于 游标 和 节点 〈 模 型 ) 的 数据 。 

第 一 次 使 用 它 时 ， 这 可 能 看 起 来 有 点 矫 枉 过 正 ， 但 要 认识 到 这 是 一 个 强大 而 灵活 的 模型 ， 它 可 以 
在 各 个 模型 之 间 提 供 一 致 的 分 页 。 




















2 什么 是 游标 

当 遍 历 一 组 很 大 的 项 时 ,我们 需要 跟踪 每 次 遍历 的 人 位置。 例如， 假设 我 们 正在 对 产 
品 列 表 进 行 分 页 。 最 简单 的 “游标 ”可 以 是 当前 的 页 码 (如 第 3 列 。 
当然 ， 在 实际 的 应 用 程序 中 ， 你 可 能 会 一 直 向 列表 中 添加 和 删除 项 目 ， 因 此 你 可 能 
会 发 现 ， 在 加 载 第 4 页 时 会 丢失 一 些 记 录 ( 因为 一 些 记录 已 被 添加 或 删除 )， 
在 这 种 情况 下 我 们 能 做 什么 ? 这 就 是 使 用 游标 的 地 方 。 游 标 是 一 个 值 ， 它 指示 我 们 
在 遍历 列表 时 的 “位 置 "。 虽然 实现 方式 各 不 相同 , 但 基本 的 思想 是 你 可 以 将 游标 发 
送 到 服务 器 ， 而 服务 器 会 提供 下 一 页 的 结果 。 
例如 ，Twitter 的 API 使 用 了 游标 ， 你 可 以 在 Twitter 的 Developer 网 站 查看 文档 


“Cursoring” 。 
让 我 们 在 遍历 这 些 连 接 的 地 方 尝试 几 个 查询 。 
以 下 是 一 个 查询 ， 它 将 得 到 一 个 作者 和 他 们 所 有 的 书 名 ( 见 图 15-6 ): 


query { 
author(id: "QXVOaG9yOmZjMjkyYmQ3ZGYwNzE4NTh jMmQwZ jk1NQ==") { 
id 
name 
books { 
count 
edges { 
node { 
id 
name 
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© O@ /0 locahost:3001/graphalrauen x ih nate @fullstack... 








所 © | © localhost:3001/craphql?query=query%20%7B%0A%20%20author(id%3A%20"QXV0aG9yOmZjMjkyYmQ3ZGYwNzE4NThjMmQ..。 会 








GraphiQL Pp) Prettify 《 RootQuery Author 咏 
1 query { wl No Description 
2 author(id: “QXveaG9yOmZjMj} * 

3 id 

4 name jaG9yOmZjMjkyYmQ3ZGYwNzE4NThjMmgwzjkl1NQ=="， IMPLEMENTS 
5v books { we Ari Lerner"， 

6 count bd 

7 edges { :3, Node 

8 node { 者 

9 id 

19 name 局 FIELDS 

11 : "Qm9vazoyNjZhMWY3Yz]1MjMONTE2OWQzYmMeNDE=" , 

12 } “name": "Fullstack React” 

13 1 } name: String 
14 }, 

15 } { avatarUr: String 







mgvazo2zDhiMwI3Yzc4MzgyNzEzHzYzZjQeNGY="， DIO: String 
“ng-book classic" 






} createdAt: Date 
books(aiter: String, first: Int, before: String, last 
i Iny: AuthorBooksConnection 

"i vazphYWZkN2T4ANmVKNDQANDUxMTUB@MZE4OTA=" , jd:ID 
am ng-book” -地 

Ft id:ID! 

] 
3 
了 





QUERY VARIABLES 





图 1$-6 ”GraphiQL 中 查询 的 包含 Book 的 Author 类 型 


点 击 GraphiQL 接口 中 的 Author 文档 。 请 注意 ， 在 Author 类 型 ( 见 图 15-7 ) 上 ，books 不 返回 
Book 数组 ， 而 是 


(1) 接收 诸如 first 或 1ast 之 类 的 参数 ; 
(2) 返回 一 个 AuthorBooksConnection 类 型 。 


< RootQuery Author x 


No Description 


IMPLEMENTS 


Node 


FIELDS 


name: String 
avatarUrl: String 
bio: String 
createdAt: Date 


books(after: String, first: Int, before: String, last: Int): 
AuthorBooksConnection 


-id: ID 
id: ID! 











图 15-7 GraphiQL Author 类 型 
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Relay 旨 在 处 理 具有 大 量 条 目的 关系 。 如 果 一 次 要 加 载 的 书 过 多 ， 则 可 以 使 用 这 些 参 数 来 限制 返 
回 的 结果 数 。 我 们 使 用 first 和 last 参数 来 表示 要 检索 的 项 目 数 。 


AuthorBooksConnection 有 三 个 字段 : 











@ pageInfo 
@ edges 


@ count 


























count 给 出 了 我 们 所 拥有 的 edges 的 总 数 ( 在 本 例 中 是 这 个 人 编写 过 的 书 的 数量 )。 


可 
pageInfo 为 我 们 提供 了 页 面 信息 , 例如 是 否 有 上 一 个 或 下 一 个 页 面 , 以 及 此 页 面 的 起 始 和 结束 游 
标 是 什么 。 稍 后 可 以 使 用 这 些 游标 来 请 求 下 一 个 (或 上 一 个 ) 页 面 。 























edges 包含 了 AuthorBooksEdge 的 列表 。 在 GraphiQL 接口 中 查看 AuthorBooksEdge 类 型 ， 见 图 
15-8。 





< AuthorBooksConnection AuthorBooksEdge XX 
An edge in a connection, 


FIELDS 


node: Book 


cursor: String! 











图 15-8 ”GraphiQL AuthorBooksEdge 类 型 
AuthorBooksEdge 有 两 个 字段 : 


@ node 


® cursor 5 


从 这 个 记录 中 ，cursor 是 一 个 可 用 于 分 页 的 字符 串 。 这 里 可 以 看 到 node 的 类 型 是 Book ， 即 在 
node 中 是 我 们 要 找 的 实际 数据 。 
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当 我 们 将 这 些 连接 用 于 多 对 多 关系 时 ， 也 能 以 相同 的 方式 处 理 一 对 多 关系 。 通 过 使 用 这 个 标准 来 
遍历 模型 之 间 的 关系 ， 就 能 很 容易 知道 如 何 访问 相关 的 模型 ， 而 无 须 关心 关系 的 类 型 是 什么 。 图 中 所 
有 的 元 素 都 是 节点 和 边 。 

此 外 ,通过 将 分 页 作为 标准 的 一 部 分 ， 我们 将 为 现实 世界 中 的 数据 集 提供 便利 ， 因 为 我 们 不 会 同 
时 加 载 关系 (或 表 ) 中 的 每 条 数据 。 

将 标准 化 的 分 页 作为 Relay 的 一 部 分 使 得 在 React 应 用 程序 中 标准 化 分 页 变 得 更 加 容易 。 


哪 部 分 是 Relay， 哪 部 分 是 GraphQL 

A 对 比 Relay 与 GraphQL 的 连接 和 边 
为 了 清晰 起 见 ， 这 里 谈论 的 是 在 GraphQL 服务 器 上 实现 的 Relay 规范 。 
连接 和 边 的 模式 以 及 上 面 定 义 的 字段 是 Relay 规范 的 一 部 分 。 每 当 需 要 两 个 对 象 之 
间 的 关系 (这 超出 了 简单 数组 的 范畴 ) 时 ， 我 们 将 使 用 边 /连接 范式 。 
Relay 指定 了 该 约定 ( 例如， 我 们 在 检索 连接 时 指定 了 参数 first 或 last， 且 连接 将 
返回 edges ), 而 GraphQL 服务 器 实现 了 如 何 ( 从 数据 库 ) 实际 获取 这 些 记录 的 方式 。 


15.3.4 ”使 用 变更 修改 数据 
变更 是 我 们 在 Relay/GraphQL 中 修改 数据 的 方式 。 要 使 用 变更 修改 数据 ， 我 们 需要 : 
(1) 找到 我 们 想 要 调用 的 变更 ; 
(2) 指定 输入 参数 ; 
(3) 指定 变更 完成 后 我 们 要 返回 的 数据 。 
比如 说 ， 我 们 想 要 修改 一 个 作者 的 简历 ， 可 以 执行 以 下 操作 : 
查询 : 


mutation { 
updateAuthor(input: { 
id: "QXVOaG9yOmZ jMjkyYmQ3ZGYwNZEA4NTh jMmQwZ jkiNQ==", 
bio: "all around great guy" 
}) { 
changedAuthor { 
id 




































































现在 可 以 从 响应 中 看 到 ， 简 历 已 改 成 了 "all around great guy"。 
响应 : 


{ 
"data": { 
"updateAuthor": { 
"changedAuthor": { 
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"id": "QXVOaG9yOmZjMjkyYmQ3ZGYwNzEA4NThN jMmQwZ jk1NQ==", 
"name": "Ari Lerner", 
"bio": "all around great guy" 
} 
} 
} 
} 


在 本 例 中 ， 变 更 是 updateAuthor 。 你 可 能 还 记得 在 第 14 章 中 ， 我 们 通过 创建 一 个 变更 查询 来 修 
改 GraphQL 中 的 数据 。 服 务 器 为 公共 数据 操作 定义 了 一 个 变更 查询 。 

举 个 例子 ， 如 果 你 熟悉 创建 - 读 取 -- 修 改 - 删 除 ( Create-Read-Update-Delete，CRUD ) 的 REST 范式 ， 
则 可 以 在 这 里 为 模型 定义 类 似 的 变更 : createAuthor 、updateAuthor 、deleteAuthor。 


虽然 变更 通常 在 GraphQL 中 使 用 ， 但 Relay 毫 无 疑问 会 指定 一 些 约束 条 件 来 定义 变更 。 
客户 端的 变更 可 能 会 有 些 令 人 生 县 。 本 章 稍 后 将 详细 讨论 它们 。 

15.3.5 ”Relay GraphQL 查 询 总 结 
上 面 仅 介绍 了 编写 Relay 应 用 程序 时 要 使 用 的 三 种 查询 类 型 


(1) 从 服务 器 获取 单独 的 记录 ; 

(2) 使 用 连接 和 边 遍 历 记录 之 间 的 关系 ; 

(3) 使 用 变更 查询 修改 数据 。 

现在 我 们 已 研究 了 数据 并 回顾 了 服务 器 上 的 约定 ， 下 面 来 看 Relay 是 如 何在 应 用 程序 中 工作 的 。 


15.4 将 Relay 添加 到 应 用 程序 中 


15.4.1 快速 了 解 目标 

下 面 开 始 编写 React 应 用 程序 。 

在 应 用 程序 中 安装 Relay 有 相当 多 的 步 又。 在 介绍 这 些 步 又 之 前 ， 让 我 们 先 来 看 目标 : 一 个 基本 
的 Relay 容器 组 件 ， 它 可 从 服务 器 加 载 数据 并 进行 泻 染 。 

一 旦 有 了 一 个 可 以 从 Relay 加 载 数据 的 组 件 ， 构 建 应 用 程序 就 会 变 得 更 加 容易 。 


下 面 我 们 将 逐步 介绍 如 何 构 建 一 个 可 正常 运行 的 Relay 应 用 程序 ， 但 了解 单 文件 “hello world” 
示例 也 可 能 会 有 所 帮助 。 以 下 是 可 以 正常 工作 的 Relay 应 用 程序 的 最 小 代码 。 许 多 细节 会 是 陌生 的 ， 
而 本 章 的 其 余部 分 则 专门 用 于 解释 如 何 使 用 每 个 想法 的 细节 。 现在， 只 需 浏览 一 下 此 代码 即 可 了 解 使 
月 Relay 涉及 的 不 同 部 分 。 


relay/bookstore/client/src/steps/index.minimal.js 








































































































































































































~ 














/* eslint-disable react/prefer-stateless-function */ 
import React from 'react'; 

import ReactDOM from 'react-dom'; 

import Relay from 'react-relay'; 
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import '../semantic-dist/semantic.css'; 
import './styles/index.css'; 


// 根据 服务 器 的 URL 进行 自 定义 
const graphQLUr1l = 'http://localhost:30601/graphql'; 


// 用 "NetworkLayer" 配 置 Relay 
Relay.injectNetworkLayer(new Relay.DefaultNetworkLayer(graphQLUr1)); 


// 创建 我 们 将 执行 的 顶级 查询 
class AppQueries extends Relay.Route { 
static routeName = 'AppQueries'; 
static queries = { 
viewer: () => Relay.QL. 
query { 
viewer 


} 


} 
} 


// 泻 染 作者 列表 的 基本 组 件 
class App extends React.Component { 
render() { 
return ( 
<div> 
<h1>Authors listx</h1> 
<U1》> 
{this.props.viewer.authors.edges.map(edge => ( 
<li key={edge.node.id}>{edge.node.name}</1i> 
))} 
</ul> 
</div> 
> 
} 
} 


// 一 个 Relay 容器 ， 用 于 指定 上 面 的 查询 中 要 使 用 的 片段 
const AppContainer = Relay.createContainer(App, { 
fragments: { 
viewer: () => Relay.QL. 
fragment on Viewer { 
authors(first: 100) { 
edges { 
node { 
id 
name 
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ReactDOM .render( 

<Relay .Renderer 
environment={Relay .Store} 
Container={AppContainer} 
queryConfig={new AppQueries( )} 

/>， 

document .getElementById('root ') 

> 














在 上 面 的 示例 中 ，AppContainer 获取 了 一 组 作者 并 将 其 泻 染 在 列表 中 。 注 意 ， 这 段 代码 是 声明 
性 的 。 也 就 是 说 ， 代 码 中 没有 “向 服务 器 发 出 posT 请 求 并 将 其 解释 为 JSON” 之 类 的 内 容 。 相 反 , 我 
们 的 组 件 声明 了 所 需 的 数据 ， 然 后 Relay 从 服务 器 获取 数据 并 将 其 提供 给 该 组 件 。 

15.4.2 ”作者 页 面 预览 
让 我 们 来 看 另 一 个 例子 ， 它 摘自 书店 应 用 程序 。 下 面 是 AuthorPage 组 件 的 其 中 一 个 版 本 : 


relay/bookstore/client/src/steps/AuthorPage.minimal.js 














































































































class AuthorPage extends React.Component { 
render() { 
const {author} = this.props; 


return ( 
<div> 
<img src={author.avatarUrl} /> 
<h1i>{author.name} </h1> 
<p> 
{/* e.g. '2 Books' or '1 Book' */} 
{author .books .count} 
{author.books.count > 1 ? ' Books' : ' Book'} 
</p> 
<p> {author .bio}</p> 
</div> 
); 
} 
} 


export default Relay.createFragmentContainer(AuthorPage, { 
fragments: { 
author: () => Relay.QL. 
fragment on Author { 
name 
avatarUrl 
bio 
books { 
count 


7 
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代码 一 共 分 为 两 部 分 : Relay .createContainer 语句 ( 带 有 Relay .QL 查询 ) 与 render() 函数 。 


概括 来 说 , 这 里 发 生 的 事情 是 Relay .QL 查询 指定 了 我 们 要 为 该 作者 加 载 的 数据 ( 见 图 15-9 )。 接 
着 ，author 对 象 通过 props 传递 到 组 件 中 ， 然 后 我 们 对 其 进行 泻 染 。 





Nate Murray 


2 Books 


Nate bio 


图 15-9 最 少 的 作者 信息 
目前 还 没有 讲 到 使 应 用 程序 运行 的 所 有 设置 。 不 过 后 面 会 讲 到 ， 而 现在 只 需 知 道 一 旦 一 切 都 设置 
好 了 ， 就 可 以 非常 容易 地 将 数据 加 载 到 组 件 中 ( 如 果 我 们 改变 主意 ， 也 很 容易 修改 查询 )。 
当 在 组 件 上 使 用 Relay 时 ， 请 注意 createContainer 和 fragment。 


15.4.3” 容 器、 查询 和 片段 
需要 从 Relay 加 载 数 据 的 组 件 称 为 容器 。 容 器 指定 的 片段 本 质 上 是 “部 分 查询 ”。 片 段 指 定 此 组 件 
需要 正确 泻 染 的 数据 。 
我 们 使 用 Relay .createContainer 创建 了 一 个 Relay 容器 ， 并 传人 组 件 和 所 需 的 片段 作为 参数 。 
容器 指定 了 需要 正确 演 染 的 fragment ， 但 是 你 必须 执行 查询 才能 泻 染 片段 。 可 以 认为 这 类 似 于 
需要 将 组 件 泻 染 到 DOM 中 。 片 段 只 有 在 被 查询 拉 入 后 才 会 被 泻 染 。 
每 个 容器 都 指定 一 个 (或 几 个 ) 片段 , 接着 我 们 将 执行 查询 , 该 查询 将 使 用 该 片段 来 获取 数据 。 
也 就 是 说 , 在 此 数据 对 组 件 可 用 之 前 , 你 必须 执行 包含 此 片段 的 查询 。 稍 后 将 讨论 查询 的 执行 。 
但 首先 来 谈 谈 Relay.QL 查询 。 


15.4.4 ”在 编译 时 验证 Relay 查 询 
GraphQL 的 一 大 优点 是 我 们 为 API 提供 了 一 种 类 型 模式 。 在 编写 客户 端 代码 时 , 可 以 利用 这 个 优势 。 
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当 我 们 在 组 件 中 编写 查询 片段 时 ， 它 看 起 来 如 下 所 示 : 


code/relay/bookstore/client/src/steps/AuthorPage.minimal.js 








fragments: { 
author: () => Relay.QL. 
fragment on Author { 
name 
avatarUrl 
bio 
books { 
count 
} 
小 
} 








但 是 请 注意 ， 我 们 将 查询 放 在 一 个 很 长 的 JavaScript 字符 串 中 。 它 很 容易 编写 ， 但 在 处 理 这 些 
询 的 简单 实现 中 ,输入 错误 可 能 是 许多 bug 的 根源 ， 因 为 我 们 无 法 验证 内 容 是 否 格 式 良 好 。 如 果 
的 内 容 有 误 ， 在 运行 其 中 一 个 查询 之 前 ， 我 们 甚至 都 不 知道 有 输入 错误 。 

但 有 一 个 好 消息 是 , 这 里 有 一 个 自 定义 的 Babel 插件 , 它 可 以 在 编译 时 针对 模式 来 验证 这 些 查 询 。 

我 们 将 使 用 babel-relay-plugin 插件 ， 它 可 以 : 

(1) 读 取 Relay .QL 反 引 号 字符 串 ; 

(2) 解析 GraphQL 查询 ; 

(3) 根据 我 们 的 模式 验证 它们 ; 

(4) 将 Relay .QL 查询 转换 为 一 个 扩展 函数 调用 。 

但 是 为 了 验证 模式 ， 我 们 需要 让 模式 对 客户 端 构 建 工 具 可 用 。 

请 记 住 , 我 们 的 模式 是 由 服务 器 定义 的 。 是 GraphQL 服务 器 定义 了 数据 模型 ( 在 本 例 
作者 ) 和 相应 的 GraphQL 模式 。 

因此 如 何 使 服务 器 模式 对 客户 端 构建 工具 可 用 呢 ? 我 们 需要 从 服务 器 将 模式 导出 为 JSON 文件 
并 将 其 复制 出 来 。 

1. 构建 schema. json 

为 了 向 客户 端 构 建 工具 提供 模式 ， 我 们 将 在 服务 器 中 编写 一 个 将 模式 导出 到 JSON 文件 的 脚本 。 

然后 ， 我 们 将 配置 babel-relay-plugin， 以 便 在 编译 客户 端 代码 时 使 用 这 个 JSON 文件 。 这 需 
要 预先 做 一 些 工 作 ， 但 好 处 是 我 们 将 在 客户 端 应 用 程序 中 得 到 编译 时 验证 和 Relay 查询 。 这 可 以 为 我 
们 的 团队 节省 大 量 时 间 来 查找 由 于 无 效 查询 而 导致 的 bug。 

下 面 是 用 来 生成 schema . json 的 脚本 : 


relay/bookstore/tools/update-schema.js 





查 
入 
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import fs from 'fs'; 

import path from 'path'; 

import { graphql } from 'graphql'; 

import { introspectionQuery, printSchema } from 'graphql/utilities'; 
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import schema from '../schema'; 


// 保存 完整 模式 内 省 的 JSON 以 供 Babel Relay 插件 使 用 
const generateJSONSchema = async () => { 
var result = await (graphql(schema, introspectionQuery)); 
if (result.errors) { 
console.error( 
'ERROR introspecting schema: ', 
JSON.stringify(result.errors, null, 2) 


) . 


} else { 
fs.writeFileSync( 
path. join(__dirname, '../client/src/data/schema.json'), 


JSON.stringify(result, null, 2) 


); 
} 


// 保存 用 户 可 读 类 型 系统 的 模式 简写 
fs.writeFileSync( 
path. join(__dirname, '../client/src/data/schema.graphql'), 


printSchema(schema) 
好 
ye 


generateJSONSchema().then(() => { 
console.1og("Saved to client/src/data/schema.{json,graphql}"); 


}) 





看 看 这 里 加 载 的 依赖 项 。 除 了 fs 和 path， 还 加 载 了 其 他 几 项 : 








(1)graphql 、introspectionQuery、 printSchema from graphql 
(2) schema from ../schema 
需要 注意 的 一 点 是 ， 我 们 没有 从 relay 库 加 载 任何 内 容 。 这 些 都 是 GraphQL ， 不 涉及 relay 库 。 
我 们 的 GraphQL 模式 符合 Relay 标准 ， 但 它 不 依赖 于 任何 特定 于 Relay 的 功能 。 这 个 导出 模式 的 过 程 
可 以 在 任何 GraphQL 服务 器 上 完成 。 
我 们 不 会 深入 研究 模式 的 实现 。 本 例 中 使 用 的 是 graffiti-mongoose 辅助 库 ， 但 这 
实际 上 是 实现 细节 。 这 个 schema 可 以 是 任何 GraphQLSchema 对 象 。 
因此 ， 要 将 此 脚本 用 于 应 用 程序 ， 只 需 修 改 schema 的 路 径 和 输出 路 径 即 可 。 











这 其 中 的 原理 是 ,我 们 告诉 graphql 库 来 采用 模式 ， 然 后 执行 introspectionQuery 并 将 模式 输 
出 到 两 个 文件 中 : 
introspectionQuery 是 一 个 查询 ， 用 于 询问 GraphQL 有 关 其 支持 的 查询 的 信息 。 
用 可 以 在 GraphQL 网 站 “Introspection ”一 文中 阅读 更 多 关于 GraphQL 内 省 的 信息 。 
(1) 一 个 机 器 可 读 的 schema. json 文件 (适用 于 客户 端 ); 
(2) 一 个 人 类 可 读 的 schema .graphql 文件 。 
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下 面 是 schema.graphql 文件 的 一 个 示例 : 


relay/bookstore/client/src/data/schema.graphql 





type Author implements Node { 
name: String 
avatarUrl: String 
bio: String 
createdAt: Date 
books(after: String, first: Int, before: String, last: Int): AuthorBooksConnection 
id: ID 


# 一 个 对 象 的 ID 
id: ID! 
} 


定义 一 个 项 目 列 表 的 连接 

type AuthorBooksConnection { 
# 帮助 分 页 的 信息 
pageInfo: PageInfol 


# 边 的 列表 
edges: [AuthorBooksEdge] 
count: Float 


} 




















如 果 我 们 位 于 此 项 目的 根 目录 (relay ) 中 ， 则 可 以 通过 运行 以 下 命令 来 生成 此 模式 : 


npm run generateSchema 


如 果 我 们 修改 过 模式 〈 比如 向 模型 添加 字段 或 添加 了 新 模型 )， 则 需要 运行 这 个 脚本 来 重新 生成 
模式 。 如 果 我 们 没有 重新 生成 模式 并 尝试 在 客户 端 应 用 程序 中 使 用 新 数据 , 那么 babel-relay-plugin 
将 抛 出 编译 圳 错误 ， 因 为 它 使 用 了 旧 模 式 。 因 此 如 果 我 们 改变 了 的 模型 ， 则 要 确保 重新 生成 模式 。 


A 注意 模式 缓存 
某 些 Webpack 配置 (例如 从 create-react-app 弹出 时 生成 的 默认 配置 ) 缓存 了 编译 的 
脚本 。 如 果 你 正在 使 用 这 样 的 功能 ( 就 像 我 们 在 这 个 应 用 程序 中 一 样 ) 那么 你 的 模 
式 也 会 被 缓存 。 
这 意味 着 当 你 更 新 模式 时 ， 必 须 清 除 react-scripts 缓存 。 在 我 的 计算 机 上 ， 这 个 
文件 夹 保存 在 node_modules/.cache/react-scripts 中 。 因 此 ， 每 当 我 们 重新 生 
成 模式 ， 可 以 运行 以 下 命令 以 清除 缓存 : 



























































rm -rf client/node_modules/.cache/react-scripts/ 





在 重新 生成 模式 时 没有 清除 此 缓存 可 能 导致 客户 端 加 载 旧 的 缓存 模式 ， 这 可 能 造成 
混淆 。 





2. 安装 babel-relay-plugin 
要 使 用 babel-relay-plugin ， 我 们 必须 做 以 下 事 





由 
瑚 
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(1) npm install babel-relay-plugin; 

(2) 告诉 babel-relay-plugin 我 们 的 schema. json; 

(3) 配置 babel 以 使 用 我 们 的 插件 。 

要 执行 第 (2) 步 ， 请 查看 client/config/babelRelayPlugin.js 文件 ， 如 下 所 示 : 
relay/bookstore/client/config/babelRelayPlugin.js 























var getBabelRelayPlugin = require('babel-relay-plugin'); 
var schema = require('../src/data/schema. json'); 


module.exports = getBabelRelayPlugin(schema.data, { 
debug: true, 
suppressWarnings: false, 
enforceSchema: true 


}); 




















我 们 在 这 里 所 做 的 只 是 通过 添加 自己 的 模式 和 设置 一 些 选项 来 配置 babel-relay- plugin。 下 面 
需要 将 这 个 脚本 作为 插件 添加 到 babel 配置 中 。 


为 此 ， 我 们 需要 在 客户 端的 package. json 中 添加 了 以 下 内 容 : 
































"babel": { 
"presets": [ 
"react-app" 
] 
"plugins": [ 


"./config/babelRelayPlugin" 
] 
}; 











上 面 ， 我 们 在 package. json 的 babel 配置 的 插件 部 分 中 添加 了 "./config/ babelRelayPlugin"。 


设置 自己 的 应 用 程序 以 使 用 Relay 时 ， 如 果 你 的 应 用 程序 中 有 一 组 不 同 的 presets 
湖 和 plugins 也 没关系 ,只 要 将 这 个 自 定 义 的 babelRelayPlugin 添加 到 列表 中 即 可 。 


另外 , 如果 你 通过 .babelrc 或 其 他 方式 配置 babel 时 , 那么 核心 思想 是 将 自 定 义 的 
babelRelayPlugin 脚本 添加 到 插件 列表 中 。 


15.4.5 ”设置 路 由 


现在 有 了 构建 工具 ， 我 们 可 以 开始 集成 Relay 和 React 了 。 因 为 我 们 正在 构建 一 个 多 页 面 的 应 用 
程序 ， 所 以 需要 一 个 路 由 。 对 于 这 个 应 用 程序 ， 我 们 将 使 用 react-router 和 react-router-relay。 



































2 如 果 想 了 解 直接 使 用 Relay ( 不 使 用 react-router ) 的 例子 ， 可 以 查看 relay- 


starter-kitm。 





个 参见 GitHub 网 站 的 facebookarchive/relay-starter-kit 页 面 











o 
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A react-router-relay 使 用 的 是 react-router v2.8 (而 不 是 router v4， 第 9 章 进行 


不 幸 的 是 ,正如 你 在 GitHub 网 站 Issuse“react-router@4 compatibility #193” 看 到 的 ， 
React-Router v4 中 还 没有 计划 直接 支持 Relay。 
也 就 是 说 , 将 Relay 与 其 他 路 由 框架 (包括 React Router v4 ) 集成 在 一 起 也 是 有 可 能 
的 。 不 过 本 章 不 会 介绍 这 些 内 容 。 
本 章 将 提供 运行 应 用 程序 所 需 的 所 有 路 由 配置 ,但 不 会 讨论 React Router API。 如 果 
你 需要 查找 ， 可 以 在 GitHub 网 站 ReactTraining/react-router 页 面 找到 Router 的 文档 。 
react-router-relay 提供 了 一 种 方便 的 方法 ， 可 以 在 路 由 发 生变 化 时 执行 Relay 查询 。 
react-router-relay 还 会 从 URL 中 读 取 参数 并 将 它们 作为 参数 传递 给 Relay 查询 。 稍 后 将 仔细 研究 
这 个 特性 。 
要 将 react-router-relay 安装 到 应 用 程序 中 ， 需 要 执行 以 下 操作 : 
(1) 配置 Relay; 
(2) 配置 Router ; 
(3) 使 用 react-router-relay 中 间 件 将 Relay 连接 到 Router。 
下 面 来 看 用 于 执行 此 操作 的 代码 : 


relay/bookstore/client/src/index.js 



































import React from 'react'; 

import ReactDOM from 'react-dom'; 

import createHashHistory from 'history/lib/createHashHistory'; 

import Relay, {DefaultNetworkLayer} from 'react-relay/classic'; 

import applyRouterMiddleware from 'react-router/l1lib/applyRouterMiddleware'; 
import Router from 'react-router/l1ib/Router'; 

import useRouterHistory from 'react-router/l1ib/useRouterHistory'; 

import useRelay from 'react-router-relay'; 


import routes from './routes'; 


import './semantic-dist/semantic.css'; 
import './styles/index.css'; 


// 根据 服务 器 的 URL 进行 自 定义 
const graphQLUr1 = 'http://1localhost:306001/graphql'; 


// 使 用 "NetworkLayer" 来 配置 Relay 
Relay.injectNetworkLayer(new DefaultNetworkLayer(graphQLUTr1) ) ; 


const history = useRouterHistory(createHashHistory)(); 


ReactDOM .render( 
<Router 
history={history} 
routes={routes} 
render={applyRouterMiddleware(useRelay)} 
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environment={Relay.Store} 
/>， 
document .getElementById('root') 
); 





第 一 部 分 导入 依赖 项 。 


然后 在 graphQLUr1 变量 中 配置 服务 器 的 URL。 如 果 服 务 器 使 用 了 其 他 URL , 请 在 此 处 进行 配置 。 
例如 ， 我 们 通常 在 这 里 使 用 特定 于 环境 的 变量 。 


接 下 来 用 "NetworkLayer" 来 配置 Relay。 本 例 中 使 用 的 是 DefaultNetworkLayer ， 它 将 用 于 发 出 
HTTP 请 求 ， 但 我 们 也 可 以 使 用 它 来 模拟 一 个 Relay 服务 器 进行 测试 ， 或 者 使 用 完全 不 同 的 协议 。 


在 这 个 应 用 程序 中 ， 我 们 将 使 用 基于 散 列 的 路 由 ， 因 此 我 们 将 使 用 createHashHistory 来 配置 
history。 


我 们 将 通过 以 下 方式 把 Router 根 组 件 绑 定 到 Relay: 


(1) 使 用 来 自 react-router-relay 的 applyRouterMiddleware(useRelay); 
(2) 设置 Relay.Store 到 Router 的 environment 中 。 


以 这 种 方式 设置 Router 可 以 使 Relay 在 应 用 程序 中 可 用 ， 但 要 实际 执行 Relay 查询 ， 我 们 还 有 一 
个 步骤 : 需要 在 路 由 上 配置 Relay 查询 。 
15.4.6 ”将 Route 添加 到 Relay 中 

让 我 们 来 看 route . js : 


relay/bookstore/client/src/steps/routes.author.js 




































































































































































import Relay from 'react-relay'; 

import React from 'react'; 

import IndexRoute from 'react-router/1ib/IndexRoute'; 
import Route from 'react-router/l1ib/Route'; 


import App from './components/App'; 
import AuthorPage from './components/AuthorPage'; 


const AuthorQueries = { 
author: () => Relay.QL. 


query { 
author(id: $authorId) 
下 
}; 
export default ( 
<Route 
path= ' /人 


component={App} 
> 
<Route 
path= '/authors/:authorId' 
component={AuthorPage} 
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queries={AuthorQueries} 
jy 
</Route> 


好 


























这 些 初 始 路 由 中 有 一 个 使 用 App 组 件 的 父 路 由 和 一 个 使 用 AuthorPage 组 件 的 子路 由 。 最 终 ， 我 
们 将 为 应 用 程序 中 的 每 个 页 面 提供 一 个 子 组 件 ， 但 现在 让 我 们 按 顺 序 查 看 以 下 内 容 : 


(1) App 父 组 件 ; 
(2) AuthorQueries 以 及 它 如 何 关联 到 AuthorPage 组 件 ; 
(3) 深入 查看 AuthorPage 组 件 。 

15.4.7 App 组 件 


顶层 App 组 件 为 应 用 程序 的 其 余部 分 建立 了 包装 器 : 


relay/bookstore/client/src/components/App.js 









































import React, {Children, Component} from 'react'; 
import {withRouter} from 'react-router'; 


import TopBar from './TopBar'; 
import '../styles/App.css'; 


class App extends React.Component { 
render() { 
return ( 
<div className="ui grid"> 
<TopBar /> 
<div className="ui grid container"> 
{Children.map(this.props.children, c => React.cloneElement(c))} 
</div> 
</div> 
); 
} 
} 


export default withRouter(App); 





这 里 将 演 染 TopBar 组 件 和 包装 了 所 有 子 组 件 (this .props.children ) 的 标记 。 
在 export App 之 前 ,我 们 使 用 了 来 自 react-router 库 的 withRouter 函数 来 包装 它 .withRouter 
是 一 个 辅助 函数 ， 它 给 组 件 提供 了 props .router 属性 。 


@ 如 果 需 要 ， 我 们 可 以 让 App 组 件 成 为 一 个 Relay 容器 ， 但 本 例 中 无 须 App 组 件 中 的 
任何 Relay 数据 。 











15.4.8 AuthorQueries 组 件 
现在 我 们 了 解 了 App 组 件 ， 下 面 回 到 routing.js 来 看 AuthorQueries 查询 : 
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relay/bookstore/client/src/steps/routes.author.js 





const AuthorQueries = { 
author: () => Relay.QL . 


query { 
author(id: $authorId) 


J 
} 
请 记 住 , 在 Relay 中 为 了 获取 组 件 所 需 的 数据 , 我 们 必须 执行 查询 。 在 使 用 react- router-relay 
时 ， 当 我 们 指定 了 访问 特定 的 路 由 时 ， 就 会 执行 在 该 路 由 上 定义 的 查询 。 
注意 ，AuthorQueries 有 一 个 查询 : author 。 这 个 查询 还 有 一 个 变量 $authorId。$authorId 变 
量 从 何 而 来 呢 ? 它 其 实 来 自 于 路 由 的 路 径 参 数 : 


relay/bookstore/client/src/steps/routes.author.js 















































<Route 
path='/authors/:authorld’ 
component={AuthorPage} 
queries={AuthorQueries} 


/> 














在 这 个 路 由 中 ， 我 们 将 匹配 路 由 /authors/ ， 路 径 后 面 的 内 容 将 被 解释 为 author1d。authorId 
将 作为 变量 传递 给 Relay 查询 。 

注意 author 查询 的 一 个 奇怪 之 处 ; 它 没有 指定 要 获取 的 数据 的 “ 叶 节 点 ”"。 查 询 在 author(id: 
$authorId) 处 停止 ， 这 是 因为 查询 将 获取 哪些 特定 数据 的 决定 权 留 给 了 组 件 。 

在 组 件 〈 准确 地 说 ， 是 Relay 容器 ) 中 ,我 们 将 指定 泻 染 该 组 件 所 需 的 字段 。 

考虑 到 这 一 点 ， 让 我 们 来 看 AuthorPage 组 件 ， 然 后 了 解 其 中 的 Relay 查询 。 

































































15.4.9 AuthorPage 组 件 
下 面 的 代码 指定 了 演 染 AuthorPage 组 件 最 少 所 需 的 字段 














relay/bookstore/client/src/steps/AuthorPage.minimal.js 





export default Relay.createFragmentContainer(AuthorPage, { 
fragments: { 
author: () => Relay.QL. 
fragment on Author { 
name 
avatarUrl 
bio 
books { 
count 


2 
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在 查询 的 “内 部 ”， 很 容易 看 出 我 们 要 求 的 是 作者 的 name 、avatarUrl 和 bio。 我 们 甚至 可 以 深 
入 books 的 关系 中 ， 并 获得 此 人 撰写 的 图 书 数量 ( count )。 


但 是 ， 现 在 可 能 还 不 清楚 如 何 将 其 与 上 面 的 查询 联系 起 来 。 我 们 需要 遵守 两 个 约束 条 件 。 









































首先 ， 这 些 片 段 的 键 名 必须 与 查询 的 键 名 匹配 。 在 本 例 中 ， 因 为 此 组 件 是 使 用 author (在 
AuthorQueries 中 ) 的 查询 键 名 泻 染 的 ， 所 以 片段 键 名 必须 也 是 author (在 AuthorPage 组 件 的 
fragments 中 )， 见 图 15-10。 





< Schema RootQuery 钱 
routes.js AuthorPage.js 
No Description 
const AuthorQueries = { export default Relay.createContainer(AuthorPage, 
author: 品 fragments: { 
1 => Relay,QL FIELDS 
(id: $authorId) frag t on Author { 
author(id: ID!): 
authors(id: [ID], ids: [ID], orderBy: a ,Name: 
export default ( Ss { , avatarUrl: , bio: String, createdAt: ;Jd: 
<Route ): ] 
path="'/" te y 
component={App} ] book(id:ID, slug: ): 
3 已 ? books(id: [ID], ids: [ID], orderBy: , Name: 
<Route ee ; , Slug: , tagline: , description: 
path= /authors/:authorId coverUrl: , pages: , CreatedAt: , id: ID} 
component={AuthorPage} [ 
queries={AuthorQueries} 
/> Viewer: 
</Route> 
node(id: ID!): 


); 
I 





图 15-10 “Relay 片段 命名 


第 二 个 约束 是 此 片段 必须 是 query 内 部 字段 类 型 上 的 fragment。 也 就 是 说 ， 我 们 不 会 将 fragment 
放 在 Book 中 ， 因 为 包含 的 查询 会 在 Author 上 “结束 ”。 通 过 查看 GraphiQL 中 的 GraphQL 模式 可 以 
看 到 这 一 点 ( 见 图 15-11 )。 


< Schema RootQuery 汉 
routes.js AuthorPage.js 


No Description 
AuthorQueries = { export default Relay.createContainer(AuthorPage, { 

> ReLay.QL fragments: { 
FIELDS 


authorld'. IDUU: 


authors(id: [ID], ids: [ID], orderBy: c ' Name: 
, avatarUrl: , bio: , createdAt: jd: 
):[ ] 


book(id:ID, slug: ): 


books(id: [ID], ids: [ID], orderBy: , Name: 

, Slug: , tagline: , description: S 
coverUrl: , pages: , CreatedAt: , id: ID): 
[Book] 


/> Viewer: 
</Route> 
); 


node(id: ID!): 





图 15-11 Relay 片段 类 型 





当 访 问 与 /authors/ :author1d 匹配 的 路 由 时 ，AuthorPage 的 author 片段 会 被 拉 入 AuthorQueries 中 ， 
然后 其 结果 会 从 服务 器 获取 并 传递 到 我 们 的 组 件 中 。 
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15.4.10” 试 试看 
目前 只 设置 了 AuthorPage ， 但 它 足 以 让 我 们 进行 尝试 。 
要 进行 测试 ， 请 确保 启动 了 GraphQL 服务 器 和 客户 端 ， 如 上 所 述 。 
接着 访问 在 http://localhost:3601/graphql 的 GraphiQL 服务 器 ， 并 尝试 以 下 查询 : 


query { 
authors { 
id 
name 
} 
} 


复制 作者 ID ， 然 后 使 用 该 ID 访问 客户 端 应 用 程序 ， 如 下 所 示 : 


http://localhost:3000/#/authors/QXVOaG9yOmIzOTY2NDVmZmZiZWIxMzc5NTEwYWIx2Zg== 


在 浏览 器 中 ， 如 果 我 们 查看 网 络 窗 格 ， 可 以 看 到 GraphQL 查询 被 调用 了 ( 见 图 15-12 )。 











Name x Headers Preview Response Timing 
et | Content-Type: application/json; charset=utf-8 
~ E | Date: Mon, 16 Jan 2017 19:52:52 GMT 
Ebundes ETag: W/"af-InJAXqCaBuAd1TeX+6hEzQ" 
css?family=Lato:400,700,400italic,700... X-Powered-By: Express 
graphal v Request Headers view source 
[|_| graphal accept: */* 
infort=1484595372647 Accept-Encoding: gzip, deflate, br 
rt Accept-Language: en-US,sn;q=9.8 
:nate-muray.png Connection: keep-alive 
| | websocket Content-Length: 228 
tpc-check html content-type: application/json 


Host: localhost:3801 
Origin: http://localhost:3080 
postmessage.js Referer: http://localhost:3888/ 

tpc-check-add-cookiejs User-Agent: Mozilla/5.8 (Macintosh; Intel Mac 05 X 
10_11.6) AppleWebKit/537.36 (KHTML, ‘ike Gecko) C 
hrome/55.0.2883.95 Safari/537.36 


buffer-hover-icon@1x.png 











v Request Payload view source 


VA} 
query Routes(sid os1D) | 
多 { 


’ 
a 
} 


} 
fragment FO on Author { 
query:| name, 
avatarUrl, 
bio， 
books { 
count 
} 


id 


}™ 
vvariables: Tid 0: "5878770787e6b58=1886f9fb9"} 


id_0: "5878f70787e6b58e186f9fb8” 











12 requests | 1.6KB transferred | Finis... 


图 15-12 在 网 络 窗 格 中 的 Relay GraphQL 调用 
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在 本 例 中 ， 通 过 网 络 发 送 的 查询 如 下 所 示 : 


query Routes($iq_ 0: ID!) { 
author(id: $id_0) { 
id, 
...FO 
} 
fragment FO on Author { 
name, 
avatarUTr1， 
bio, 
books { 
count 





查询 的 第 一 部 分 (query Routes. .. ) 来 自 于 AuthorQueries ， 而 片段 Fo 来 自 于 我 们 在 AuthorPage 
上 的 author 片段 。 同 样 ， 请 注意 将 这 个 片段 Fe 放 在 Author 之 外 的 任何 类 型 上 都 没有 任何 意义 ， 
为 query 、author 的 子 类 型 是 Author。 试 图 将 Book 或 任何 其 他 类 型 的 片段 放 在 这 里 都 是 无 效 的 。 


15.4.11 具有 样式 的 AuthorPage 


目前 所 泻 染 的 最 小 可 用 的 AuthorPage 看 起 来 不 是 很 好 。 让 我 们 快速 添加 一 些 标记 ， 以 使 页 面 看 
起 来 更 好 。 


像 本 书 中 的 许多 示例 一 样 , 我们 将 Semantic UI 用 于 CSS 框架 。CSS 类 名 如 sixteen wide column 
或 ui grid centered， 都 来 自 于 Semantic UI。 


在 保持 相同 的 Relay 查询 下 ， 我 们 将 把 AuthorPage 标记 更 改 为 以 下 内 容 (效果 见 图 15-13 ): 
relay/bookstore/client/src/steps/AuthorPage.styled.js 




































































class AuthorPage extends React.Component { 
render() { 
const { author } = this.props; 


return ( 
<div className='authorPage bookPage sixteen wide column'> 
<div className='spacer row' /> 


<div className='ui divided items '> 
<div className='item'> 
<div className='Ui'> 
<img src={author.avatarUrl1} 
alt={author .name} 
className='ui medium rounded bordered image' 
/> 
</div> 
<div className= ' content > 
<div className='header authorName ' > 
<h1>{ author .name }</h1> 
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《<div className='extra'> 
‘<div className='ui label'> 
{ author.books.count } 
{ author.books.count > 1 ? ' Books' : ' Book' } 
</div> 
</div> 
</div> 
<div className='description'> 
<p> { author.bio } </p> 
</div> 


</div> 
</div> 
</div> 


</div> 
); 
} 
} 





® 9® /FulstackReact:Rela/Bookst x nate@fullstack... 





€ Q@ | © localhost:3000/#/authors/5878170787e6b58e180f9fb0 女 | :| 
Bookstore Demo 


Nate Murray : 


Nate bio 





图 15-13 带 有 样式 的 作者 页 面 


稍 后 会 把 作者 的 图 书 列表 添加 到 这 个 页 面 , 但 现在 让 我 们 构建 此 站 点 的 “索引 ”页 面 , 它 将 显示 
所 有 可 用 图 书 的 列表 。 
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15.5 ”BooksPage 组 件 
图 15-14 是 我 们 完成 后 的 图 书 列表 页 面 的 样子 。 











© FulstackReact:Rela Books! x nate@fullstack... 
CG | © localhost:3000/#/books/ng-book-classic 全 | 
Bookstore Demo 
JavaScript Books 


人 A 


ng-book 2 


The Complete Book on Angularls 2 


ng-book 


The Complete Book on Angularjs 





AUTHORS AUTHOR 4AUTHORS 


Fullstack React ng-book classic ng-book 
The Complete Book on ReactJS and The Complete Book on AngularJS The Complete Book on Angular 2 
Friends 

Learn Angular 1 with this classic book. ng-book is the easiest way to learn 


Build awesome apps in React in record Angular 
time, with the best book ever to have 








15-14 ”图 书 列表 页 再 
我 们 需要 做 的 第 一 件 事 是 为 BooksPage 创建 路 由 ， 并 为 该 路 由 创建 查询 。 

















15.5.1 BooksPage 路 由 
BooksPage 将 成 为 应 用 程序 的 默认 页 面 ， 因 此 我 们 将 使 用 IndexRoute 辅助 程序 来 定义 此 路 由 : 


relay/bookstore/client/src/routes.js 





























<IndexRoute 
component={BooksPage} 
queries={ViewerQueries} 





让 我 们 来 看 ViewerQueries: 


relay/bookstore/client/src/routes.js 





const ViewerQueries = { 
Viewer: () => Relay.QL “query { viewer }., 


}; 








下 





在 这 个 页 面 上 ， 我们 将 通过 viewer 节点 查找 图 书 列表 。 
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严格 意义 上 viewer 节点 并 不 是 Relay 的 一 部 分 ， 但 它 是 许多 GraphQL 应 用 程序 中 常见 的 模式 。 
其 思想 是 让 “viewer” 作 为 应 用 程序 的 当前 用 户 。 因 此 在 实际 应 用 程序 中 ， 经 常会 看 到 viewer 字段 
接收 一 个 用 户 标识 字段 ( 例如 身份 验证 令 牌 ) 作为 参数 。 





想象 创建 一 个 带 有 社交 消息 的 应 用 程序 。 可 以 使 用 viewer 字段 来 获取 特定 用 户 的 消息 ， 而 不 是 








所 有 用 户 的 “全 部 ”消息 。 








本 例 将 使 用 Viewer 来 加 载 图 书 列 寻 





15.5.2 ”BooksPage 组 件 




















人 由 
[e] 


图 15-15 有 两 个 Relay 容器 ， 如 下 所 示 : 


(1) BooksPage 容器 ， 用 于 包含 所 有 的 图 书 ; 
(2) BookItenm 容器 ， 用 于 泻 染 一 本 特定 的 图 书 。 


© /Fulstack React: Relay Books! x 





nate@fullstack... 


€ GC © localhost:3000/#/books/ng-book-classic 个 | 


JavaScript Books 


Fullstack React 
The Complete Book on ReactJS and 
Friends 


Build awesome apps in React in record 
time, with the best book ever to have 


因为 BooksPage 路 由 在 viewer 上 指定 


上 指定 一 个 片段 。 让 我 们 来 看 这 个 查询 : 





A 


ng-book ng-book 2 


The Complete Book on Angular]S The Complete Book on Angularjs 2 
| 


1AUTHOR 


ng-book classic ng-book 


The Complete Book onAngularjS The Complete Book on Angular 2 


Learn Angular 1 with this classic book. ng-book is the easiest way to learn 
Angular. 








图 15-15 ”图 书页 面 组 件 





了 查询 , 所 以 我 们 将 在 该 关键 viewer (在 Viewer 类 型 上 ) 


relay/bookstore/client/src/components/BooksPage.js 





export default Relay.createContainer(BooksPage, { 


initialVariables: { 
count: 100 
}, 
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fragments: { 
viewer: () => Relay.QL. 
fragment on Viewer { 
books(first: $count) { 
count 
edges { 
node { 
slug 
${BookItem.getFragment('book ' )} 








里 有 一 些 新 的 东西 ， 如 下 所 示 : 

(1) initialvariables; 

(2) 使 用 getFragment() 组 合 了 一 个 片段 。 

1. 片段 变量 

可 以 使 用 initialVariables 字段 为 查询 设置 变量 。 这 里 你 可 以 看 到 我 们 告诉 Relay 要 将 $count 
设置 为 198， 且 可 以 看 到 在 查询 中 要 获取 的 是 前 100 本 书 。 

通过 使 用 viewer，, 我 们 不 能 说 “我 想 要 所 有 的 书 "。 这 是 因为 该 服务 器 是 为 大 型 应 用 程序 设计 的 ， 
且 通 常 不 需要 加 载 数据 库 中 的 每 个 项 目 。 通 常 我 们 会 使 用 分 页 。 

这 个 例子 中 将 count 设 为 1906， 因 为 对 于 这 个 简单 的 应 用 程序 来 说 100 已 经 足够 了 。 但 假设 我 们 
想 要 修改 count 变量 ， 要 怎么 做 呢 ? 

可 以 使 用 this.props.relay.setVariables， 如 下 所 示 : 










































































this.props.relay.setVariables({count: 2}); 
如 果 调 用 上 面 的 函数 ， 你 会 看 到 我 们 只 加 载 了 两 本 书 ， 而 不 是 整个 集合 。 
通常 ， 当 我 们 希望 组 件 能 够 修改 正在 执行 的 查询 的 参数 时 ， 可 以 使 用 Relay 变量 。 


个 如 果 你 在 尝试 通过 连接 来 获取 项 目 列表 时 忘记 设置 适当 的 变量 ( 例如， 没有 first 
字段 ), 则 可 能 会 得 到 一 个 错误 , 如 下 : {1ang=shell,1ine-numbers=off} Uncaught 
Error: Relay pk error You supplied the ‘edges. field on a 


connection named “authors’, but you did not supply an argument 
necessary to do so. Use either the ‘find’, ‘first’, or ‘last” argument . 


in file code/relay/bookstore/client/src/components/BookPage.js. 如 果 你 


最 近 新 增 了 参数 、 字 段 或 者 类 型 ， 请 尝试 更 新 GraphQL 模式 。 15 











2. 片段 组 合 
这 一 点 很 重要 : 如 果 你 使 用 子 Relay 组 件 ， 则 需要 使 用 getFragment( ) 将 子 片 段 柑 入 父 查询 中 。 
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请 记 住 ,片段 是 查询 的 一 部 分 ， 在 成 为 已 执行 查询 的 一 部 分 之 前 ， 它 们 不 会 起 作用 。 如 果 你 希望 
像 BookItem 这 样 的 子 组 件 能 够 泻 染 每 本 书 ， 那 么 必须 在 BooksPage 查询 中 包含 BookIten 片段 。 
这 需要 一 点 时 间 来 适应 ， 我 们 甚至 还 没有 看 到 BooksPage 的 render() 函数 ， 因 此 让 我 们 先 查 看 


render( ) 函数 ， 然 后 当 有 更 多 的 上 下 文 时 再 回 到 片段 组 合 的 想法 。 























15.5.3 BooksPage render() 
以 下 是 BooksPage 的 演 染 代码 : 


relay/bookstore/client/src/components/BooksPage.js 





class BooksPage extends React.Component { 


render() { 
const books = this.props.viewer.books.edges.map(this.renderBook); 


return ( 
<div className="sixteen wide column"> 


<h1>JavaScript Books</h1> 

<div className="ui grid centered">{books}</div> 
</div> 
3 
} 


renderBook(bookEdge) { 
return ( 

<Link 
to={`/books/${bookEdge.node.slug}`} 
key={bookEdge.node.slug} 
className="five wide column book" 

> 
<BookItem book={bookEdge.node} /> 

</Link> 

5 
} 

} 


























render( ) 函数 有 一 个 基本 的 包装 器 。 我 们 获取 了 this.props.viewer .books.edges 并 且 在 每 条 
边 上 调用 renderBook 。 


用 请 注意 ， 我 们 不 是 在 图 书本 身 (node ) 上 调用 renderBook， 而 是 在 edge 上 。 





在 renderBook 中 ， 我 们 演 染 了 一 个 Link 组 件 ， 具 体内 容 如 下 所 示 : 


(1) 它 链 接 到 /books/${bookEdge.node.slug}; 
(2) 它 包 含 一 个 用 book 对 象 填充 的 BookItem 组 件 ，book 对 象 可 以 在 bookEdge .node 中 获取 到 。 

















让 我 们 更 深入 地 研究 BookItem 组 件 ， 然 后 再 返回 到 BooksPage 组 件 以 进一步 了 解 Relay 是 如 何 
管理 父 / 子 片 段 的 值 的 。 
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15.5.4 BookItem 
以 下 是 对 BookItem 的 Relay 查询 : 


relay/bookstore/client/src/components/BookItem.js 








export default Relay.createContainer(BookItem, { 


fragments: { 
book: () => Relay.QL. 
fragment on Book { 
name 
slug 
tagline 
coverUrl 
pages 
description 
authors { 
count 


} 


}); 











我 们 使 用 Book 类 型 的 book 键 定义 了 一 个 片段 。 这 个 查询 月 








slug、pages 以 及 查询 authors 以 获得 count。 
以 下 是 组 件 的 定义 : 


relay/bookstore/client/src/components/BookItem.js 














有 于 请 求 基本 的 








图 书信 息 ， 








如 name 、 





class BookItem extends React.Component { 
render() { 
return ( 
<div className="bookItem"> 
<FancyBook book={this.props.book} /> 


<dqiv className="bookMeta"> 
<div className="authors"> 
{this.props.book.authors .count} 


{this.props.book.authors.count > 1 ? ' Authors' : ' Author 


</div> 
<h2> {this.props.book.name} </h2> 


<div className="tagline">{this.props.book.tagline}</div> 
<div className="description">{this.props.book.description}</div> 


</div> 
</div> 
) ; 
} 
} 


村 














在 div bookMeta 中 3 我 们 显示 了 一 些 基 本 信息 ， 如 authors ( 作者 数量 )、name ( 书 名 JR tagline 











(标语 ) 和 description (描述 )。 
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我 们 还 将 this .props .book 传递 给 纯 组 件 FancyBook ， 该 组 件 仅 为 该 书 上 的 精美 3D CSS 效果 提 
供 标记 。 


15.5.5 ”BookItem 片 段 
BookItenm 的 book 片段 的 有 趣 之 处 在 于 它 没有 绪 定 到 特定 的 查询 。 记 住 ,， 我 们 在 BooksPage 中 使 
用 的 查询 是 从 Viewer 开始 的 。 
这 里 所 做 的 是 要 使 用 这 个 组 件 , 且 它 关心 的 东西 与 Book 类 型 有 关 。 只 要 将 这 个 Book 片段 组 合 到 
父 片 段 的 一 个 有 效 的 位 置 ， 我 们 就 可 以 使 用 这 个 BootItem 组 件 。 
这 里 的 经 验 法 则 是 ， 如 果 你 组 合 了 Relay 组 件 ， 那 么 也 要 确保 组 合 了 它们 的 片段 。 
如 果 你 收 到 如 下 警告 : 


warning.js:36 Warning: RelayContainer:  _ component BookItem was rendered 
with variables that differ from the variables used to fetch fragment book. 


这 意味 着 你 忘记 了 在 父 查询 中 包 包含 子 片段 。 


15.5.6 “片段 值 屏蔽 
我 们 还 没有 讨论 过 Relay 的 另 一 个 重要 功能 : 数据 屏蔽 。 


其 思想 是 组 件 只 能 看 到 它们 明确 要 求 的 数据 。 如 果 组 件 没 有 请 求 特定 的 字段 ， 即 使 已 经 加 载 了 该 
数据 ，Relay 也 会 主动 地 向 组 件 隐藏 该 字段 


例如 ， 在 BookItem 和 BooksPage 上 并 行 查询 。 需 要 注意 以 下 两 点 : 


@ BookItenm 为 图 书 加 载 了 slug 字段 ; 
@ BooksPage 使 用 slug 字段 作为 Link 组 件 的 URL。 


回顾 一 下 ， 以 下 是 BookItenm 的 Relay .QL 查询 : 


relay/bookstore/client/src/components/BookItem.js 
















































































export default Relay.createContainer(BookItem, { 
fragments: { 
book: () => Relay.QL. 
fragment on Book { 
name 
slug 
tagline 
coverUrl 
pages 
description 
authors { 
count 


3 
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以 下 是 BooksPage 的 Relay .QL 查询 : 


relay/bookstore/client/src/components/BooksPage.js 





export default Relay.createContainer(BooksPage, { 
initialVariables: { 
count: 100 
| 
fragments: { 
viewer: () => Relay.QL. 
fragment on Viewer { 
books(first: $count) { 
count 
edges { 
node { 
slug 
${BookItem.getFragment('book' )} 





你 可 能 会 认为 ， 因 为 我 们 在 BooksPage 查询 中 调用 了 ${BookItem.getFragment ('book')},， 就 
意味 着 BooksPage 组 件 可 以 使 用 slug， 不 过 事实 并 非 如 此 。 


























片段 组 合 不 会 使 子 片段 的 数据 可 用 于 父 查询 。 如 果 我 们 和 希望 能 够 在 BooksPage 的 render() 函 











中 使 用 该 字段 ， 则 必须 在 BooksPage 查询 中 显 式 列 出 slug 字段 。 














一 开始 数据 屏蔽 是 会 让 人 觉得 不 方便 的 特性 之 一 ， 但 随 着 你 的 应 用 














用 程序 ( 和 团队 ) 的 发 展 ， 它 会 

















a 


理 BookItem 并 清除 了 slug 字段 ， 那 么 会 


发 现 数据 意外 丢失 了 《但 知道 已 加 载 到 其 他 地 方 )， 请 检查 查询 ， 以 确 


变 得 非常 有 用 














因为 它 可 以 防止 组 件 外 部 更 改 导 致 的 bug。 


数 


峭 


假设 BooksPage 依赖 于 BookItem 中 的 slug 字段 来 加 载 ， 但 在 这 条 线 上 的 某 个 地 方 ， 有 人 正在 清 





会 发 生 什 么 呢 ? BooksPage 会 朋 溃 。 








数据 屏蔽 的 思想 是 组 件 之 间 的 这 种 耦合 是 不 好 的 。 每 个 组 件 应 该 定义 它 需 要 正确 泻 染 的 所 有 内 
容 。 数 据 屏 蔽 是 一 种 确保 每 个 组 件 显 式 定义 其 需要 操作 的 数据 集 的 方法 。 














屏 菩 是 双向 的 





这 种 屏蔽 还 有 另 一 种 方式 : 因为 我 们 确实 定义 了 BooksPage ( 父 级 ) 需要 的 slug 字段 ， 所 以 即 
使 我 们 传递 了 book (通过 <BookItem book={bookEdge.node}/> ), 子 
访问 slug。 
































任何 Relay 管理 的 props 将 根据 查询 使 用 屏蔽 。 因 此 ， 在 编写 应 用 程序 时 要 注意 数据 屏蔽 。 如 果 











级 如 果 没有 显 式 请 求 ， 就 不 能 














上 


























A 





保 在 需要 的 地 方 显 式 请 求 了 纪 








件 中 的 那些 特定 字段 。 
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15.5.7 ”改进 AuthorPage 











现在 可 以 泻 染 图 书 列表 了 ， 但 在 作者 页 面 显示 作者 所 撰写 的 
鉴于 刚刚 讨论 过 的 内 容 ， 我 们 知道 可 以 通过 以 下 步 又 来 添加 
































(1) 在 Relay 查询 中 请 求 作 者 的 图 书 (books ); 
(2) 在 这 个 查询 中 包含 BookItem 片段 ; 














图 书 列表 是 一 个 很 好 的 体验 。 
图 书 列表 : 





(3) 获取 作者 的 图 书 清单 ， 并 为 每 本 图 书 演 染 一 个 BookItem。 


现在 就 开始 吧 。 
获取 作者 的 图 书 


现在 ，AuthorPage 只 包含 作者 拥有 的 图 书 数量 (count )。 为 了 显示 完整 的 图 书 缩 略 图 








并 进行 链 





接 ， 让 我 们 修改 AuthorPage 查询 以 包含 更 多 关于 作者 图 书 的 数据 : 


relay/bookstore/client/src/components/AuthorPage.js 





export default Relay.createContainer(AuthorPage, 
fragments: { 
author: () => Relay.QL. 
fragment on Author { 
_id 
name 
avatarUrl 
bio 
books(first: 100) { 
count 
edges { 
node { 
slug 
${BookItem.getFragment('book' )} 


{ 








这 个 修改 显示 了 Relay 和 GraphQL 的 优点 之 一 。 考 虑 一 下 ， 如 果 我 们 使 用 传统 的 基于 REST 的 
API， 那 么 这 种 类 型 的 修改 会 是 什么 样子 呢 ? 我 们 必须 编写 代码 来 查找 作者 的 id ， 并 向 服务 器 请 求 作 














者 的 图 书 ， 而 且 必 须 添加 代码 来 优雅 地 处 理 错误 。 在 这 
分 添加 到 查询 中 ， 并 在 其 中 填充 所 需 的 字段 。 


我 们 使 

















j Relay 所 要 做 的 就 是 将 books( ) 部 


多 注意 ,我 们 只 是 硬 编码 了 想 要 的 前 100 本 书 。 在 实际 应 用 程序 中 ， 我 们 可 能 会 像 在 


BooksPage 中 那样 设置 一 个 变量 。 








要 记 住 需要 做 的 另 一 件 事 是 包含 BookItem 的 book 片段 ,同样 ,请 注意 这 里 的 “ 父 ” 查 询 是 author 。 











你 可 能 还 记得 ， 它 是 在 路 由 中 的 Author 类 型 上 。 但是, 你 





需要 记 住 这 些 ， 只 需要 知道 BookItenm 的 


book 片段 位 于 Book 类 型 上 ， 就 可 以 将 它 放 在 所 有 人 允许 Book 类 型 的 查询 中 。 
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© 如 何 知道 子 组 件 需要 哪些 片段 
如 果 你 构建 的 是 第 一 个 Relay 应 用 程序 ， 那 么 可 能 无 法 立即 清楚 地 知道 应 该 请 求 哪 
些 片 段 。 从 本 质 上 讲 ， 它 应 该 是 组 件 文档 的 一 部 分 。 同 样 ， 为 了 使 用 “常规 ”组 件 ， 
你 可 能 需要 知道 它 需 要 哪些 props， 而 同样 ， 你 使 用 的 组 件 的 作者 需要 记录 你 将 使 
用 什么 片段 来 渔 染 该 组 件 。 
AuthorPage TrenderBook 
现在 有 了 图 书 ， 就 可 以 对 它们 进行 泻 染 了 ， 如 下 所 示 : 


relay/bookstore/client/src/components/AuthorPage.js 





class AuthorPage extends React.Component { 
renderBook(bookEdge) { 
return ( 
<Link 
to={“ /books/${bookEdge.node.slug}} 
key={bookEdge.node.slug} 
className="five wide column book" 
> 
<BookItem book={bookEdge.node} /> 
</Link> 
); 
} 





接着 在 render( ) 函数 中 : 


render() { 
const author = this.props.author; 
const books = this.props.author .books.edges.map(this.renderBook); 





return ( 


{A/F es 此 处 删 减 */} 


《<div ClassName= ' sixteen wide column'> 
<h1>{ author .name }&rsquo;s Books</h1> 
<div className='ui grid centered'> 

{ books } 
</div> 
</div> 


{/* 此 处 删 减 */} 
2 
} 


添加 了 图 书后 的 作者 页 面 见 图 15-16。 
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四 四 局 /图 FulstackReact RelayBooksr x nate@fullstack.. 
€ CG |© localhost:3000/#/authors/5878170787e6b58e180f9fbO Q 人 | ! 
Bookstore Demo | 
| 


Nate Murray ,< 


Nate bio 





OOK 





ng-book 
The Complete Book on An 


ng-book is the easiest way to learn Angular 











图 15-16 带 有 图 书 的 作者 页 面 


15.6 ”使 用 变更 修改 数据 


现在 我 们 已 知道 了 以 下 几 点 : 


(1) 如 何 从 Relay 中 读 取 一 条 数据 记录 ; 
(2) 如 何 从 Relay 读 取 数 据 列表 ; 
(3) 如 何 从 子 组 件 加 载 数据 。 


还 有 一 个 关键 的 问题 我 们 还 没有 涉及 : 修改 数据 。 在 Relay 中 是 通过 变更 来 修改 数据 的 。 

我 们 将 添加 编辑 图 书 元 数据 的 功能 。 

首先 为 每 本 书 创建 一 个 新 页 面 。 就 像 之 前 做 的 那样 ， 我 们 将 从 Relay 读 取 初始 数据 。 然 后 将 讨论 
如 何 用 变更 来 修改 数据 。 


15.7 ”构建 图 书页 面 
单个 图 书页 面 的 只 读 版 本 没有 太 多 新 想法 ， 因 此 让 我 们 简要 地 讨论 一 下 。 
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首先 看 一 下 该 页 面 ， 见 图 15-17。 


®©99 FulstackReact:RelayBooks! x \ nate@fullstack... 








€ CG | © localhost:3000/#/books/fullstack-react 让 | } 


Fullstack React 


The Complete Book on ReactJS and Friends 


Build awesome apps in React in record time, with the best book ever to have dolphins 
on the cover. 


Authors 





Ari Lerner 





Clay Allsopp David Guttman Tyler McGinnis 








locaihost:3000/#/authors/587817078766058e18019fb6 


图 15-17 只 读 的 单个 图 书页 面 


可 以 看 到 ,我们 显示 了 基本 的 图 书 图 片 、 各 个 作者 信息 和 图 书 封面 。 
以 下 是 Relay 容器 : 


relay/bookstore/client/src/steps/BookPage.reads.js 




















export default Relay.createContainer(BookPage, { 
fragments: { 
book: () => Relay.QL、 
fragment on Book { 
id 
name 
tagline 
coverUrl 
description 
pages 
authors(first: 100) { 
edges { 
node { 
_id 
name 
avatarUrl 
bio 
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在 这 个 片段 中 ， 我 们 将 加 载 Book 元 数据 以 及 前 100 位 作者 。 
让 我 们 看 一 下 render( ) 函数 : 


relay/bookstore/client/src/steps/BookPage.reads.js 








render() { 
const { book } = this.props; 
const authors = book.authors.edges.map(this.renderAuthor ) ; 
return ( 
<div className='bookPage sixteen wide column'> 
<div className='spacer row' /> 


《<div className='ui grid row'> 
<dqiv className='six wide column'> 
<FancyBook book={book} /> 
</div> 


<dqiv className='ten wide column'> 
<div className='content ui form'> 


<h2> {book .name} </h2> 


<div className='tagline hr'> 
{book .tagline} 
</div> 


<div className='description'> 
<p> 
{book.description} 
</p> 
</div> 


</div> 


<div className='ten wide column authorsSection'> 
<h2 className='hr'>Authors</h2> 
<div className='ui three column grid link cards'> 
{authors} 
</div> 
</div> 


</div> 
</div> 


</div> 
3 
} 
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这 里 的 大 多 数 标记 是 带 有 Semantic UI 类 的 div。 我 们 基本 上 只 是 用 一 个 合理 的 布局 来 显示 图 书 
言 息 。 


对 于 每 个 作者 的 边 ， 我们 将 调用 renderAuthor : 


relay/bookstore/client/src/steps/BookPage.reads.js 











renderAuthor(authorEdge) { 
return ( 
<Link 
key={authorEdge.node._id} 
to={ /authors/${authorEdge.node._id}`} 
className='column’ 
> 
<div className='ui fluid card' > 
<div className= ' image'> 
<img src={authorEdge.node.avatarUrl1} 
alt={authorEdge.node.name} 
Ey 
</div> 
<div className= ' content > 
<div className='header'>{authorEdge.node.name} /div> 
</div> 
</div> 
</Link> 
); 
} 





书页 面 编辑 

现在 为 图 书 的 数据 添加 一 些 基本 的 编辑 。 我 们 希望 能 够 做 到 的 是 只 要 点 击 任何 字段 ( 如 标题 或 描 
述 )， 就 能 及 时 进行 编辑 。 为 简单 起 见 ， 让 我 们 使 用 现 有 的 内 联 编辑 组 件 React Edit Inline Kit。 

React Edit Inline Kit (或 简称 RIEK ) 具有 一 个 简单 的 API。 需 要 指定 以 下 几 项 : 




















(1) 原始 值 ; 
(2) 该 值 的 属性 名 称 ; 





(3) 该 值 发 生变 化 时 要 运行 的 回调 。 
2 你 可 以 在 GitHub 网 站 kaivi/riek 页 面 查 看 RIEK 的 文档 。 


为 了 能 够 隔离 正在 执行 的 操作 , 让 我 们 将 RIEK 集成 到 应 用 程序 中 , 且 无 须 修改 Relay 中 的 数据 。 
第 一 步 只 需 使 内 联 表单 编辑 可 以 工作 ， 接 着 处 理 修 改 后 的 处 理 方法 。 
以 下 是 在 BookPage 上 使 用 了 RIEK 的 新 render( ) 函数 : 


relay/bookstore/client/src/steps/BookPage.iek.js 15 


render() { 
const { book } = this.props 
const authors = book.authors.edges.map(this.renderAuthor ) ; 
return ( 
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} 


<div className='bookPage sixteen wide column'> 
<div className='spacer row' /> 


《<div className='ui grid row'> 
<dqiv className='six wide column'> 
<FancyBook book={book} /> 
</div> 


<div className='ten wide column'> 
<div className='content ui form'> 


<h2> 
<RIEInput 
value={fbook .name} 
propName={ 'name '} 
change={this.handleBookChange} 
/> 
</h2> 


<div className='tagline hr'> 
<RIEINnput 
value={book .tagline} 
propName={'tagline'} 
change={this.handleBookChange} 
/> 


</div> 


<div className='description'> 
<p> 
<RIETextArea 
value={book .description} 
propName={'description'} 
change={this .handleBookChange} 
A 
</p> 
</div> 


</div> 


<div className='ten wide column authorsSection'> 
<h2 className='hr'>Authors</h2> 
<div className='ui three column grid link cards'> 
{authors} 
</div> 
</div> 


</div> 
</div> 


</div> 


); 
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我 们 使 用 RIEInput 和 RIETextArea 添加 了 三 个 新 组 件 。 当 数据 发 生变 化 时 ， 这 三 个 组 件 都 会 调 
用 handleBookChange 国 数 。 以 下 是 当前 的 实现 : 
relay/bookstore/client/src/steps/BookPage.iek.js 











handleBookChange(newState) { 
console.1o0g('bookChanged', newState, this.props.book); 


} 





此 时 要 做 的 就 是 将 变化 记录 到 控制 台 。 
图 15-18 是 把 标语 改 成 "The Complete Book on ReactJS and Dolpins" 后 的 截图 。 








bookChanged P Object {description: "The Complete Book on ReactJS and Dolphins"} BookPage.is:121 
Vv Object 
__dataID_:“Qm9vazoyNjZzhMWY3YzJLMjMONTE20WQzYmMONDg=” 
pb__fragments__: 0bject 
Pp authors: Object 
coverUrl: "/images/books/fullstack_react_book_cover.png" 
description: "The Complete Book on ReactJS and Friends" 
id: "Qm9vazoyNjZhMWY3YzJLMjMONTE20WQzYmMONDg=" 
name: "Fullstack React" 
pages: 760 
tagline: "The Complete Book on ReactJS and Friends" 
Pp_proto_: Object 


15-18 ”使 用 console.1og 打印 标语 


可 以 在 此 处 看 到 newState 具有 更 新 book 所 需 的 新 值 ,我 们 目前 的 任务 是 通过 一 个 变更 把 这 个 变 
化 告诉 Relay。 


闪 





@ 需要 说 明 的 是 ,使 用 RIEK 作为 表单 库 是 可 选 的 , 这 里 选择 它 是 为 了 方便 。 它 与 Relay 
无 关 。 可 以 在 任何 表单 库 中 完成 在 Relay 中 创建 变更 的 步骤 。 如 果 你 想 构 建 自己 的 
表单 ， 那 非常 好 ， 请 查看 第 6 章 。 


15.8 ”变更 


Relay 中 的 变更 是 描述 变化 的 对 象 。 变 更 是 Relay 中 最 难 适应 的 方面 之 一 。 也 就 是 说 , 变更 的 复杂 
性 来 自 于 构建 CS 应 用 程序 所 固有 的 权衡 。 让 我 们 来 看 看 在 Relay 中 创建 变更 的 必要 步 又: 

在 Relay 中 改变 数据 : 

(1) 需要 定义 一 个 变更 对 象 ; 

(2) 需要 创建 该 对 象 的 实例 ， 并 传递 配置 变量 ; 

(3) 然后 使 用 Relay .Store .commitUpdate 将 其 发 送 给 Relay。 

Relay 中 有 5 种 主要 的 变更 类 型 : 

@ FIELDS_CHANGE 

@ NODE_DELETE 

@ RANGE_ADD 
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@ RANGE_DELETE 
@ REQUIRED_CHILDREN 


因为 我 们 将 更 新 现 有 对 象 的 字段 ， 所 以 会 编写 一 个 FIELDS_CHANGE 变更 。 
@ 本 章 不 会 深入 讨论 每 一 种 类 型 的 变更 。 
如 果 想 查 看 描述 每 种 变更 的 官方 文档 ， 请 查阅 其 官方 变更 指南 。 


A 同样 值得 注意 的 是 ,初次 了 解 变 更 可 能 会 有 些 困难 。Relay 2 的 主要 目标 之 一 是 使 变 
更 变 得 更 容易 使 用 。 


15.8.1 定义 一 个 变更 对 象 

Relay 中 的 变更 都 是 对 象 。 为 了 定义 一 个 新 的 变更 ， 我 们 创建 了 Relay .Mutation 子 类 。 接 下 来 ， 
当 我 们 想 要 执行 一 个 变更 时 ， 就 创建 此 类 的 一 个 实例 ， 并 用 适当 的 属性 进行 配置 ， 然 后 将 其 提供 给 
Relay ( 它 负 责 与 服务 器 进行 通信 并 更 新 Relay 存储 )。 

当 创建 Relay.Mutation 子 类 时 ， 我 们 必须 定义 6 件 事 描述 变更 的 行为 。 

(1) 使 用 哪 种 GraphQL 方法 来 处 理 这 种 变更 ? 

(2) 哪些 变量 将 被 用 作 该 变更 的 输入 ? 

(3) 此 变更 依赖 于 哪些 字段 才能 正常 运行 ? 

(4) 此 变更 会 改变 哪些 字段 ? 

(5) 如 果 一 切 进 展 顺利 ， 此 变更 的 预期 结果 是 什么 ? 

(6) Relay 应 该 如 何 处 理 从 服务 器 返回 的 实际 响应 ? 

我 们 通过 为 每 一 项 定义 一 个 函数 来 指定 它们 的 行为 。 

这 可 能 需要 我 们 比 在 使 用 “ 即 用 即 弃 ”的 API 时 更 加 小 心 , 但 请 记 住 
个 步 又， 我 们 可 以 获得 Relay 管理 数据 统计 的 好 处 。 

如 果 看 一 个 具体 的 例子 ， 就 会 容易 得 多 ， 因 此 让 我 们 使 用 FIELDS_CHANGE 进行 “更 新 ”。 

打开 client/src/mutations/UpdateBookMutation. js。 让 我 们 从 顶部 开始 来 看 看 .getMutation: 













































































通过 具体 描述 变更 中 的 每 












































relay/bookstore/client/src/mutations/UpdateBookMutation.js 





export default class UpdateBookMutation extends Relay.Mutation { 
AR 
getMutation() { 
return Relay.QL ‘mutation { updateBook }; 
} 
7 
} 














创建 Relay .Mutation 子 类 时 , 需要 指定 的 第 一 件 事 是 GraphQL 变更 的 节点 。 这 里 我 们 指定 使 用 
updateBook 变更 。 


可 以 通过 使 用 GraphiQL 在 模式 中 找到 这 个 变更 并 在 根 上 选择 mutation 字段 。 
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在 图 15-19 中 可 以 看 到 , updateBook 接收 了 一 个 input 参数 , 类 型 为 updateBookInput ,并 返回 
一 个 类 型 为 updateBookPayload 的 条 目 。 

对 于 updateBook， 我 们 用 于 updateBookInput 的 值 将 被 用 作 指定 该 图 书 的 新 值 。 

也 就 是 说 ， 我 们 将 发 送 一 个 id 用 于 查找 正在 修改 的 特定 图 书 ， 接 着 将 发 送 新 的 值 ， 如 name、 
tagline 或 description。 


当 需 要 发 送 此 变更 时 ， 传 递 给 updateBookInput 的 值 将 来 自 于 getVariables 限 数 : 








< Schema RootMutation 3 


No Description 


FIELDS 


addAuthor(input: addAuthorinput!): addAuthorPayload 


UpdateAuthor(input: updateAuthorinput!): 
updateAuthorPayload 


deleteAuthor(input: deleteAuthorinput!): 
deleteAuthorPayload 


addBooktinput': addBookInput!): addBookPayload 


UpdateBook(input: updateBookinput!): 
updateBookPayload 


deleteBook{input: deleteBookinput!): deleteBookPayload 


图 15-19 updateBook 变更 


relay/bookstore/client/src/mutations/UpdateBookMutation.js 





getVariables() { 
return { 
id: this.props.id, 
name: this.props.name, 
tagline: this.props.tagline, 
description: this.props.description 
}; 
} 





这 个 函数 描述 了 如 何 为 updateBookInput 创建 参数 ,在 本 例 中 ,我 们 将 在 this .props 中 获取 id、 

name 、tagline 和 description 的 值 。 
我 们 必须 注意 的 一 件 事 是 确保 这 个 变更 具备 它 需 要 正确 操作 的 所 有 字段 。 例如， 此 变更 特别 需要 

一 个 Book id， 因为 这 是 我 们 引用 正在 修改 的 对 象 的 方式 。 15 
要 做 到 这 一 点 ， 我 们 需要 指定 fragments ， 就 像 在 Relay 的 容 需 组 件 中 做 的 那样 : 
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relay/bookstore/client/src/mutations/UpdateBookMutation.js 





static fragments = { 
book: () => Relay.QL. 
fragment on Book { 
id 
name 
tagline 
description 


> 








注意 ,在 getVariables 中 ， 我们 还 发 送 了 name 、tagline 和 description ， 但 没有 检查 它们 是 
否 具有 值 。 

Relay 会 屏蔽 来 自 变更 的 属性 值 ， 就 像 对 组 件 一 样 。 这 里 可 能 会 引入 一 个 小 bug: 如 果 我 们 忘记 
指定 正确 的 片段 ， 那 么 该 变更 会 意外 地 将 这 些 值 设置 为 null。 

有 什么 解决 方案 呢 ? 就 像 父 组 件 需要 包含 其 子 组 件 的 片段 一 样 , 任何 使 用 变更 的 组 件 也 需要 包含 
该 变更 的 片段 。 我 们 将 在 下 面 的 应 用 程序 中 使 用 UpdateBookMutation 来 演示 如 何 做 到 这 一 点 。 

发 送 这 个 变更 后 ， 它 将 在 服务 器 上 进行 评估 。 在 本 例 中 ， 服 务 器 上 的 更 改 非常 简单 : 更 新 一 个 对 
象 的 字段 值 。 

也 就 是 说 ， 对 于 许多 变更 而 言 ， 其 影响 可 能 更 微妙 ， 因 为 我 们 不 可 能 总 是 知道 变更 操作 的 全 部 副 
作用 。 

此 外 ， 我 们 实际 上 根本 无 法 确认 这 次 操作 是 否 成 功 。 

为 了 处 理 这 个 问题 ， 我 们 将 要 求 服务 器 把 所 有 我 们 认为 可 能 已 更 改 的 字段 发 回 给 我 们 。 为 此 ， 
我 们 将 指定 一 个 所 谓 的 “ 胖 查 询 ”。 它 之 所 以 “ 胖 ”， 是 因为 我 们 试图 捕捉 所 有 可 能 发 生变 化 的 字段 : 


relay/bookstore/client/src/mutations/UpdateBookMutation.js 












































































































































getFatQuery() { 
return Relay.QL. 
fragment on updateBookPayload { 
changedBook 
} 


} 











胖 查 询 是 一 个 GraphQL 查询 。 本 例 中 只 要 求 changedBook 。 因此 , 一 旦 在 服务 器 上 运行 了 此 变更 ， 
我 们 就 要 求 服 务 器 返回 我 们 希望 修改 的 图 书 的 更 新 后 的 新 值 。 

Relay 将 获取 该 changedBook ( 它 是 Book 类 型 的 对 象 )， 查 看 它 的 ID ， 并 再 相应 地 更 新 Relay 的 
存储 。 

但 是 ,在 服务 器 返回 实际 的 响应 之 前 ， 我 们 可 以 选择 进行 性 能 优化 并 指定 一 个 “乐观 ”响应 。 乐 
观 啊 应 回答 了 一 个 问题 : 假设 这 个 变更 成 功 执行 ， 响 应 会 是 什么 呢 ? 
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下 面 是 getOptimisticResponse 的 实现 : 


relay/bookstore/client/src/mutations/UpdateBookMutation.js 





getOptimisticResponse() { 
const {book, id, name, tagline, description} = this.props; 


const newBook = Object.assign({}, book, {id, name, tagline, description}); 


const optimisticResponse = { 
changedBook: newBook 

}; 
console.1log('optimisticResponse', optimisticResponse); 
return optimisticResponse; 


} 





在 这 个 函数 中 ， 我 们 将 旧 的 book 与 参数 值 合并 在 一 起 。 乐 观 响 应 会 返回 一 个 newBook ， 它 看 起 
来 像 我 们 即将 要 从 getFatQuery 获得 的 响应 一 样 。 

这 种 变更 很 简单 : 我 们 拥有 原始 的 图 书 ， 并 拥有 更 新 后 的 字段 。 在 这 种 情况 下 ， 甚 至 不 需要 询问 
服务 器 就 可 以 知道 变更 的 结 

因此 我 们 能 做 的 就 是 假装 用 户 的 操作 是 成 功 的 。 这 可 以 使 用 户 感受 到 超级 响应 式 应 用 程序 的 感 
觉 ， 因 为 他 们 无 须 等 待 网 络 调用 即 可 立即 看 到 更 改 的 效果 。 

如 果 变 更 执行 成 功 ， 那 么 用 户 也 不 会 知道 。 

如 果 变 更 执行 失败 , 那么 我 们 会 向 用 户 提供 错误 确认 。 但 我 们 仍 有 机 会 处 理 这 种 情况 并 通知 用 户 ， 
也 许 告诉 他 们 需要 再 试 一 次 。 

如 果 应 用 程序 可 以 接受 折 中 的 一 致 性 ， 那 么 乐观 响应 可 以 极 大 地 改善 应 用 程序 的 响应 时 间 。 

当 从 服务 器 返回 实际 响应 时 ， 我 们 需要 告知 Relay 如 何 处 理 该 数据 。 

因为 有 几 种 不 同 的 方法 来 更 改 数据 , 所 以 Relay 变更 必须 实现 一 个 getConfigs( ) 方 法 , 该 方法 用 
于 描述 Relay 处 理 已 更 改 的 实际 数据 的 方式 。 


relay/bookstore/client/src/mutations/UpdateBookMutation.js 
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getConfigs() { 
return [ 
{ 
type: "FIELDS_CHANGCE ' ， 
fieldIDs: { 
changedBook: this.props.book.id 
} 
} 
]; 
} 














在 本 例 中 ， 因 为 我 们 使 用 了 FIELDS_CHANGE 变更 ， 所 以 指定 了 changedBook 来 查找 一 个 与 我 们 
正在 讨论 的 图 书 相 匹配 的 ID。 
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15.8.2 ”内 联 编辑 

既然 已 定义 了 变更 ， 下 面 准备 在 BookPage 组 件 上 实现 点 击 编 辑 。 

请 记 住 ,我 们 的 变更 将 在 完成 后 执行 一 个 查询 ， 以 检查 服务 器 的 Books 数据 的 当前 值 。 因 此 ， 我 
们 需要 将 变更 片段 组 合 到 BookPage 查询 中 。 

正如 子 Relay 组 件 需要 组 合 其 片段 一 样 ， 组 件 使 用 的 任何 变更 也 需要 组 合 其 片段 。 

现在 ， 在 BookPage 查询 中 添加 变更 的 片段 : 


relay/bookstore/client/src/components/BookPage.js 












































fragments: { 
book: () => Relay.QL. 
fragment on Book { 
id 
name 
tagline 
coverUrl 
description 
pages 
authors(first: 100) { 
edges { 
node { 
_id 
name 
avatarUrl 
bio 
} 
} 
} 
${UpdateBookMutation.getFragment( 'book' )} 
小 
} 





加 如 果 你 将 来 忘记 把 变更 片段 添加 到 查询 中 ， 则 可 能 会 得 到 以 下 信息 : 
Warning: RelayMutation: Expected prop ‘book. supplied to ‘UpdateBookMutation. to be \ 


data fetched by Relay. This is likely an error unless you are purposely passing in m\ 
ock data that conforms to the shape of this mutation's fragment. 


解决 方案 : 将 变更 片段 添加 到 调用 组 件 的 查询 中 。 
现在 已 具备 了 执行 变更 的 一 切 准备 ! 让 我 们 更 新 nandleBookChange 来 发 出 该 变更 : 


relay/bookstore/client/src/components/BookPage.js 





handleBookChange(newState) { 
console.1log('bookChanged', newState, this.props.book); 
const book = Object.assign({}, this.props.book, newState); 
Relay .Store.commitUpdate(l 
new UpdateBookMutation({ 
id: book.id, 
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name: book.name, 
tagline: book.tagline, 
description: book.description, 
book: this.props.book 
}) 
); 
lL 

















这 里 使 用 0bject .assign 创建 了 一 个 合并 了 this.props .book 和 newState 的 新 对 象 。 接 下 来 ， 
通过 调用 Relay .Store .commitUpdate 并 向 它 传递 一 个 新 的 UpdateBookMutation 来 执行 该 变更 。 

而 Relay 将 在 幕后 执行 以 下 操作 : 

@ 立即 使 用 乐观 响应 更 新 视图 和 Relay 存储 ; 

@ 调用 GraphQL 服务 器 ， 并 尝试 执行 变更 ，; 

@ 接收 来 自 GraphQL 服务 器 的 回复 并 更 新 Relay 存储 。 

希望 此 时 乐观 响应 与 实际 响应 是 一 致 的 。 但 如 果 不 一 致 ， 实 际 的 值 则 会 显示 在 我 们 的 页 面 上 。 
































15.9 总 结 

















一 旦 我 们 掌握 了 这 些 基 础 ， 那 么 与 手工 管理 传统 REST API 相 比 ， 使 用 Relay 是 一 种 非常 棒 的 开 
发 体验 。 


Relay 和 GraphQL 为 数据 提供 了 强大 的 类 型 化 结构 ， 同 时 在 更 改组 件数 据 需 求 方面 提供 了 无 与 伦 
比 的 灵活 性 。 


Relay 2 即将 推出 “， 它 承诺 会 提供 更 好 的 性 能 和 开发 体验 ( 特别 是 在 变更 方面 )。 即 便 如 此 ， 现 
在 在 编写 应 用 程序 方面 ，Relay 1 的 功能 也 已 经 足够 强大 。 

































































15.10 ”参考 资料 


想 了 解 更 多 关于 Relay 的 信息 ， 请 参考 以 下 资源 。 

e@ Learn Relay 是 Relay 的 入 门 教程 。 

e@ relay-starter-kit 是 带 有 React 应 用 程序 的 Relay 的 基本 实现 。 

e@ relay-todomvc "是 使 用 了 Relay 的 流行 的 TodoMVC 应 用 程序 的 实现 。 如 果 你 正在 寻找 更 多 变更 
的 例子 ， 那 么 这 是 一 个 很 好 的 起 点 。 

e@ ”react-router-relay“ 是 本 章 中 用 于 将 React Router 与 Relay 结 合 使 用 的 集成 库 。 















































Qa 翻译 本 书 时 Realy 2 已 发 布 。 一 一 译 者 注 
@) 参见 How To Graphql 网 站 。 

@@) 参见 GitHub 网 站 的 facebookarchive/relay-starter-kit 页 面 。 
由 参见 GitHub 网 站 的 taion/relay-todomvc 页 面 。 

@ 参见 GitHub 网 站 的 relay-tools/react-router-relay 页 面 。 
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e GraphQL 中 的 身份 验证 指南 一 一 在 某 些 时 候 ， 你 可 能 希望 在 服务 器 中 添加 一 些 需要 身份 验证 
的 页 面 ， 这 篇 文章 会 是 一 个 很 好 的 起 点 。 

® Relay 2: simple faster more pyedictable 幻 灯 片 2 一 如 司 
Hurrell 的 这 些 幻灯 片 。 












































你 想 了 解 Relay 的 动向 ， 请 查看 Greg 








人 参见 Apollo Blog 网 站 文章 “A Guide to Authentication in GraphQL”。 
人 @) 参见 Speaker Deck 网 站 。 





React Native 








本 章 将 逐步 介绍 如 何 构建 你 的 第 一 个 React Native 应 用 程序 , 但 不 会 深入 讨论 React Native。React 
Native 是 一 个 非常 庞大 的 主题 ， 可 以 单独 写 一 本 书 了 。 


Ei React Native 图 书 
要 更 深入 地 了 解 React Native， 请 访问 FULLSTACK 网 站 查看 我 们 关于 React Native 
的 书 。 

我 们 将 为 React 开发 人 员 解 释 React Native。 到 本 章 结束 时 ， 你 将 能 够 使 用 React Web 应 用 程序 ， 
并 具备 将 其 转变 为 React Native 应 用 程序 的 知识 基础 。 

如 我 们 目前 所 见 ，React 既 有 趣 又 强大 。 本 章 的 目标 是 通过 React Native 来 了 解 我 们 喜欢 的 React 
是 如 何 被 用 来 构建 一 个 原生 i0S 和 Android 应 用 程序 的 。 

在 不 深入 了 解 React Native 底层 工作 的 技术 细节 的 情况 下 ， 总 结 如 下 。 

当 我 们 构建 React 组 件 时 , 实际 上 是 在 使 用 虚拟 DOM 构建 React 组 件 的 表示 形式 , 而 不 是 实际 的 
DOM 元 素 。 在 浏览 器 中 ，React 接收 这 个 虚拟 DOM 并 预先 计算 Web 浏览 器 中 的 元 素 应 该 是 什么 样子 
的 ， 然 后 将 其 交 给 浏览 器 来 处 理 布局 。 

React Native 背后 的 思想 是 , 我 们 可 以 从 React 组 件 中 获取 对 象 表示 的 树 , 但 不 是 将 其 映射 到 Web 
浏览 器 的 DOM， 而 是 将 其 映射 到 iOS 的 UIView 或 Android 的 android.view。 从 理论 上 讲 ， 我 们 可 以 
在 Web 浏览 器 中 使 用 React 背 后 的 相同 思想 来 构建 原生 的 i0S 和 Android 应 用 程序 ,这 就 是 React-Native 
背后 的 基本 思想 。 

本 章 将 为 原生 泻 染 器 构建 React 组 件 ， 并 重点 介绍 React Native 与 Web 中 的 React 的 区 别 。 

在 深入 讨论 细节 前 ， 让 我 们 先 从 宏观 层面 开始 。 至 关 重 要 的 是 ,我 们 不 再 在 Web 环境 中 构建 ,这 
意味 着 有 不 同 的 UX、UI， 且 没有 URL 位 置 。 虽 然 我 们 已 围绕 构建 用 于 Web 的 UI 建 立 了 思维 过 程 ， 
但 这 些 还 不 足以 转化 为 在 移动 原生 环境 中 构建 出 色 的 用 户 体验 。 

让 我 们 花 点 时 间 来 看 一 些 非常 流行 的 原生 应 用 程序 ， 并 尝试 进行 使 用 。 与 其 从 用 户 的 角度 使 用 应 
用 程序 ， 不 如 试 着 去 想象 构建 应 用 程序 的 过 程 ， 并 注意 其 细节 。 例 如 ， 如 何 寻 找 微 动 画 、 设 置 视图 、 
页 面 过 渡 、 缓 存 ， 以 及 如 何在 屏幕 之 间 传 递 数据 ， 或 者 在 等 待 信息 加 载 时 会 发 生 什 么 。 

一 般 来 说 ， 我 们 可 以 在 Web 上 使 用 较 少 的 UI 设计。 然而 ， 在 移动 设备 上 ， 我 们 的 屏幕 大 小 和 数 
据 细节 更 受 限 制 ， 我 们 不 得 不 更 加 关注 应 用 程序 的 体验 。 为 原生 应 用 构建 一 个 优秀 的 UX 需要 深思 熟 
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上 处 的 执行 并 关注 其 细 广 。 
本 章 的 目标 之 一 是 强调 两 种 平台 之 间 存 在 的 语法 差异 和 审美 差异 。 


























16.1 初始 化 


本 节 将 重点 放 在 直接 获取 代码 上 ， 因 此 我 们 希望 启动 一 个 应 用 程序 ， 这 样 就 可 以 试验 和 测试 构建 
的 原生 应 用 程序 。 我 们 需要 一 个 引导 应 用 程序 ， 以 便 在 学 习 React Native 的 不 同 组 件 时 可 以 使 用 一 个 
基本 的 应 用 程序 。 

为 了 引导 React-Native 应 用 程序 ， 可 以 使 用 react-native-cli 工具 。 我 们 需要 使 用 npm 安装 该 
工具 。 让 我 们 在 全 局 安装 react-native-cli 工具 ， 以 便 可 以 在 系统 的 任何 位 置 进行 访问 


npm i -g react-native-cli@2.6.1 


安装 文档 

有 关 针 对 特定 开发 环境 进行 React Native 设置 的 正式 说 明 ， 请 查阅 其 官方 的 人 门 文档 。 

安装 react-native-cli 工具 后 ,我 们 就 可 以 在 终端 中 使 用 react-native 命令 了 。 如 果 返 回 “not 
recognized”( 无 法 识别 ) 错误 ,请 从 上 方 安装 文档 中 查找 适用 于 你 的 开发 平台 的 入 门 文档 。 


$ react-native 


要 创建 一 个 新 的 React-Native 项 目 ， 我们 将 使 用 要 生成 的 应 用 程序 的 名 称 来 运行 react-native 
init 命令 。 例 如 ， 我 们 要 生成 一 个 名 为 Playground 的 React-Native 应 用 程序 ， 则 命令 如 下 所 示 : 


$ react-native init Playground 


你 的 命令 输出 可 能 与 图 16-1 的 看 起 来 有 些 不 同 ， 但 只 要 你 看 到 有 关 如 何 启动 它 的 说 明 即 可 。 


































































































De native-examples — Term— -zsh— ttys003 
@ $ init Playground 
This will walk you through creating a new React Native project in /Users/auser/Development/fullstack/react-book/man 
uscript/code/react-native/native-examples/Playground 
Installing react-native,... 
Consider installing yarn to make this faster: https://yarnpkg.com 
Setting up new React Native app in /Users/auser/Development/fullstack/react-book/manuscript/code/react-native/nativ 
e-exampLes/PLayground 
Installing React,.. 
Installing Jest... 
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue 
npm WARN prefer global marked@0.3.6 should be installed with -9 
To run your app on i0S: 
react-native run-ios 
和 





[AE 
Hit the Run button 


To run your app on Android: 
Have an Android emutator running (quickest way to get started)，or a device connected 
react-native run-android 
@ $ 


图 16-1 命令 输出 
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现在 可 以 使 用 刚刚 创建 的 Playground 应 用 程序 来 测试 和 运行 代码 ， 这 也 是 我 们 将 在 本 节 中 要 创 


建 的 代码 。 


16.2 ”路 由 











让 我 们 从 路 由 开始 ， 因 为 它 几 乎 是 每 个 应 用 程序 的 基础 。 
在 Web 中 实现 路 由 时 ， 通 常 是 将 URL 映射 到 特定 的 UI。 例 如 ， 让 我 们 来 看 一 个 可 能 是 为 Web 
编写 的 游戏 ， 它 使 用 的 是 React Router V2 API， 有 多 个 页 面 。 


当 我 们 在 Web 上 实现 路 由 时 ， 通 常会 将 一 些 URL 映射 到 特定 的 UI。 下 面 是 React Router V2 将 
URL 映射 到 活动 组 件 的 示例 : 




















src/routes.js 





export const Routes = ( 
<Router history={hashHistory}> 


“Route path= 


'/' component={Main}> 


<IndexRoute component={Home} /> 


<Route 


path='players/:playerOne?' 


componen 
/> 
<Route 
path= 'ba 
componen 
/> 


<Route 





t={PromptContainer} 


ttle' 
t={ConfirmBattleContainer} 


path='results' 


componen 
/> 
</Route> 
</Router> 


)3 





t={ResultsContainer} 





URL 


活动 的 组 件 





foo.com 


Main -> Home 


foo.com/players Main -> PromptContainer 


foo.com/players/ari Main -> PromptContainer 


foo.com/battle Main -> ConfirmBattleContainer 


foo.com/results Main -> ResultsContainer 


React Router 在 URL 和 UI 之 间 布 置 了 这 种 漂亮 的 映射 ( 即 声明 式 )。 











当 用 户 被 导航 到 应 用 程序 中 的 不 同 URL 时 ， 不同 的 组 件 将 被 激活 。URL 是 React Router 的 基础 ， 
因此 在 开篇 说 明 中 曾 两 次 提 到 : 
React Router 让 UI 与 URL 保持 同步 ,把 **... 考 虑 为 *URL 是 你 的 第 一 个 想法 , 而 不 是 事后 的 想法 。 
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这 是 一 个 干净 且 易 于 理解 的 范式 ， 它 使 React Router 变 得 如 此 流行 。 但 如 果 要 开发 原生 应 用 程 
怎么 












序 ， 该 怎么 办 呢 ? 我 们 没有 可 以 参考 的 URL。 在 原生 应 用 程序 中 甚至 没有 类 似 的 URL 概念 映射 。 
由 范式 转换 # 方式 来 考虑 路 
由 ， 而 不 是 URL 到 UI 映射 的 方式 ， 见 图 16-2。 
“< el 2 ， 
a 本 A 
J Fe 
> 
eee 


16-2 ”以 层 的 方式 考虑 路 由 


原生 应 用 程序 中 的 路 由 层 本 身 是 以 栈 格式 进行 结构 化 存储 的 ， 大致 来 说 就 是 一 个 数组 。 当 我 们 在 
React Native 中 的 路 由 之 间 切 换 时 ， 只 是 将 路 由 推 入 导航 到 视图 ) 或 弹出 〈 离开 视图 ) 路 由 栈 。 


























什么 是 路 由 栈 

路 由 栈 是 指 用 户 在 整个 应 用 程序 中 访问 的 视图 数组 。 当 用 户 第 一 次 打开 应 用 程序 时 ， 0 
长 度 将 为 1 ( 即 初始 页 面 )。 假 设 用 户 接 下 来 导航 到 我 的 账户 页 面 ， 那 么 路 由 栈 会 有 两 个 条 目 : 
始 页 面 和 账户 页 面 。 

当 用 户 在 虚拟 应 用 程序 中 导航 回 主屏 幕 时 ， 路 由 栈 将 弹出 (或 删除 最 新 的 ) 视图 ， 并 使 路 由 栈 
再 次 只 包含 一 个 条 目 : 初始 页 面 。 

















它 来 自 Web 浏览 器 , 这 是 一 个 不 同 于 映射 离散 URL 的 范式 。 我 们 将 管理 一 个 数组 来 映射 路 由 栈 ， 
而 不 是 映射 到 一 个 唯一 的 URL。 

此 外 ,我 们 不 仅 会 学 习 将 视图 组 件 映 射 到 视图 ， 还 将 学 习 如 何在 路 由 之 间 进 行 过 渡 。Web 上 通常 
有 独立 的 路 由 过 渡 , 但 与 Web 不 同 的 是 ， 当 我 们 从 一 个 屏幕 导航 到 下 一 个 屏幕 时 , 原生 应 用 程序 通常 
需要 了 解 彼此 的 信息 。 

例如 ， 我 们 通常 在 视图 演 染 后 会 有 动画 ， 而 在 路 由 之 间 没 有 过 渡 。 但 是 在 原生 应 用 程序 中 ， 在 
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视图 泻 染 后 我 们 仍 会 保留 这 些 动画 ， 并 且 需 要 设计 一 种 方法 来 让 一 个 路 
路 由 。 

原生 设备 上 的 大 多 数 路 由 过 渡 是 自然 分 层 的 , 通常 应 该 适当 地 反映 用 户 在 应 用 程序 的 每 个 阶段 的 

在 React Native 中 , 可 以 通过 场景 配置 来 配置 这 些 路 由 过 渡 。 稍 后 我 们 将 看 到 如 何 定制 场景 过 渡 ， 
但 现在 要 注意 的 是 不 同 平台 需要 不 同 的 路 由 过 渡 。 

在 iOS 平台 上 ， 我 们 通常 会 处 理 三 种 不 同 的 路 由 过 渡 : 

e@ 从 右 到 左 

e@ 从 左 到 右 

e@ 自 下 而 上 

通常 情况 下 ， 当 我 们 在 iOS 上 深入 相同 的 层级 时 ,会 从 右 推 入 一 个 路 由 ; 当 它 处 于 不 同 层级 的 模 
态 屏幕 时 ， 我 们 将 从 底部 显示 一 个 视图 。 我 们 通常 会 在 相同 的 层次 结构 中 使 用 从 左 到 右 的 过 渡 来 推 人 
新 视图 ， 并 在 离开 前 一 个 路 由 后 从 右 到 左 过 渡 弹 出 。 


然而 ，Android 范式 略 有 不 同 。 我 们 仍 可 以 深入 更 多 内 容 ， 但 除了 硬性 地 从 左 到 右 过 渡 之 外 ， 
有 创建 高 程 变化 的 概念 。 








过 渡 到 导航 栈 中 的 下 一 个 


















































































































































玩 一 玩 
不 管 我 们 开发 的 是 什么 设备 ， 最 好 在 正在 使 用 的 平台 上 打开 有 目前 流行 的 应 用 程序 ， 并 注意 其 屏幕 
之 间 是 如 何 进行 路 由 过 渡 的 。 
晶 论 已 经 够 多 了 ， 让 我 们 回 到 实现 上 来 。React Native 路 由 有 多 种 选择 。 在 撰写 本 文 时 ，Facebook 


二 React Native 开发 一 个 新 的 路 由 组 件 。 下 面 将 继续 使 用 久 经 考验 的 Navigator 组 件 
来 处 理应 用 程序 中 的 路 由 。 















































16.3 Navigator /> 





<Navigator /> 组 件 也 只 是 一 个 React 组 件 ， 就 像 路 由 的 Web 版 本 一 样 ， 它 是 被 泻 染 用 于 处 理 路 
的 React 组件。 这 意味 着 我 们 可 以 像 视 图 中 的 其 他 任何 组 件 一 样 来 使 用 它 。 


<Navigator /> 

知道 了 <Navigator /> 组件 只 是 一 个 React 组 件 以 后 ， 我 们 想 知道 以 下 几 点 。 
(1) 它 接收 的 props 是 什么 ? 

(2) 是 否 有 必要 将 其 包装 在 高 阶 组 件 中 ? 

(3) 如 何 使 用 单个 组 件 进 行 导航 ? 

让 我 们 从 第 (1) 条 开始 ， 即 它 接收 的 props 是 什么 ? 


<Navigator /> 仪 需要 两 个 props， 它 们 都 是 函数 : 





















































@ configureScene() 
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@ TrenderScene( ) 
每 当 我 们 在 应 用 程序 中 更 改 路 由 时 ， 都 会 调用 configureScene( ) 函数 和 TrenderScene( ) 限 数 。 


renderScene( ) 限 数 负责 确定 下 一 步 要 演 染 的 是 哪个 UI (或 组 件 )， 而 configureScene( ) 函数 负 
责 详细 说 明 要 实现 的 过 渡 类 型 ( 如 前 所 述 )。 

为 了 完成 它们 的 工作 ， 我们 需要 接收 有 关 将 要 发 生 的 特定 路 由 变化 的 一 些 信息 。 当 然 ， 因 为 这 些 
是 函数 ， 所 以 它们 将 使 用 此 信息 作为 函数 的 参数 来 调用 。 


与 其 讨论 ,不 如 让 我 们 看 看 它 在 代码 中 是 什么 样子 的 。 我 们 现在 从 样板 开始 ， 并 知道 它 将 泻 染 一 
个 组 件 : 


src/app/index.js 







































































export default class App extends Component { 
configureScene(route) { 
// 处 理 场 景 配置 
} 


renderScene(route, navigator) { 


// 处 理 场 景 演 染 


render() { 
return ( 
<Navigator 
TrenderScene={this.renderScene} 
configureScene={this.configureScene} 




















漂亮 ! 可 以 注意 到 这 也 回答 了 上 面 的 第 二 个 问题 。 通 常 ， 当 我 们 使 用 cNavigator /> 组 件 时 ,会 
将 其 包装 在 高 阶 函 数 中 ， 以 便 处 理 renderScene() 和 configureScene() 方 法 。 











16.3.1 renderScene() 





下 面 来 看 renderScene( ) 方 法 需要 如 何 实现 。 我 们 目前 知道 renderScene( ) 国 数 的 两 点 如 下 所 示 。 
(1) 日 的 是 弄 清 楚 过 渡 到 新 场景 时 要 演 染 的 UI (或 组 件 )。 

(2) 接收 一 个 表示 将 要 发 生 的 路 由 变化 的 对 象 。 

考虑 到 这 两 点 ， 让 我 们 来 看 一 个 实现 renderScene( ) 函数 的 例子 : 


src/app/index.js 





























renderScene(route) { 
if (route.home === true) { 
return ‘HomeContainer /> 
else if (route.notifications === true) { 
return <NotificationsContainer /> 
else { 


ei et 
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return <FooterTabsContainer /> 
上 
} 























由 于 renderScene( ) 函数 的 全 部 目的 是 确定 下 一 步 要 尝 染 哪个 UI( 或 组 件 ), 因此 renderScene() 
函数 只 是 一 个 大 的 if 语句 ， 它 根据 route 对 象 的 属性 来 演 染 不 同 的 组 件 。 

下 一 个 问题 自然 是 “route 对 象 从 哪里 来 ? 它 是 如 何 获得 home 属性 和 notifications 属性 的 ? ” 

这 是 React Native 配置 有 点 奇怪 的 地 方 。 还 记得 上 面 提 到 过 , 每 当 我 们 更 改 应 用 程序 中 的 路 由 时 ， 


都 会 同时 调用 configureScene() 和 renderScene() 吗 ? 不 过 我 们 还 没有 回答 如 何在 应 用 程序 中 改变 
路 由 。 要 回答 这 个 问题 ， 我 们 需要 查看 renderScene( ) 函数 接收 的 第 二 个 参数 


renderScene(route, navigator) { 
// 泻 染 场景 

} 

navigator 对 象 是 一 个 实例 对 象 ， 我 们 可 以 使 用 它 在 应 用 程序 中 操作 当前 路 由 。 对 象 本 身 包含 一 
些 非常 方便 的 方法 , 包括 push( ) 和 pop() 方 法 。push( ) 和 pop( ) 方 法 是 我 们 在 应 用 程序 中 通过 推 人 路 
由 堆 或 从 路 由 堆栈 弹出 来 实际 处 理 路 由 变化 的 方法 。 

请 注意 , 我 们 在 renderScene( ) 方 法 中 接收 了 navigator 对象 , 但 是 renderScene( ) 方 法 用 于 选 
择 下 一 个 场景 ， 而 不 是 调用 路 由 更 改 。 为 了 在 泻 染 场景 中 真正 使 用 navigator 对 象 , 我 们 需要 把 它 作 
为 一 个 属性 传递 给 新 路 由 : 















































Navigator: 





































































































src/app/index.js 
renderScene(route, navigator) { 
if (route.home === true) { 
return <HomeContainer navigator={navigator} /> 
} else if (route.notifications === true) { 
return <NotificationsContainer navigator={navigator} /> 
} else { 
return <FooterTabsContainer navigator={navigator} /> 
} 


} 





通过 这 个 更 改 , cHomeContainer />、<NotificationsContainer /> 和 <FooterTabsContainer /> 
都 可 以 访问 navigator 实例 ， 并 可 以 使 用 this.props.navigator 从 路 由 栈 中 调用 push( ) 方 法 或 pop() 
方法 。 

假设 我 们 在 home 路 由 上 工作 ， 并 希望 导航 到 notifications 路 由 。 可 以 采用 以 下 方法 将 其 推 入 
导航 路 由 中 : 


src/app/containers/home.js 






















































































handleToNotifications() { 
this.props.navigator .push({ 
notifications: true, 
}); 
} 





S74 第 16 章 React Native 





一 旦 <HomeContainer /> 组 件 调 上 


] 了 handleToNotifications() 方 法 ， 那 么 它 将 使 用 route 参数 




















来 调用 renderScene( ) 方 法 ， 该 参数 将 通过 this .props.navigator .push( ) 方 法 向 下 传递 推 入 的 对 
象 。 当 renderScene() 看 到 route 对 象 包 含 的 notifications 属性 为 true 时 ， 它 会 返回 


<NotificationsContainer /> 作为 下 一 个 要 演 染 的 组 件 。 


























如 果 这 还 没有 马上 奏效 ， 也 不 用 太 担 心 。 我 们 会 经 常 使 用 <cNavigator /> 组 件 ， 有 了 更 多 的 经 验 
后 ， 那 么 我 们 再 往 前 学 习 才 变 得 更 加 有 意义 。 




















16.3.2 configureScene( ) 























现在 知道 了 如 何在 应 用 程序 中 


























改 路 由 , 我 们 将 需要 根据 将 要 发 生 的 特定 路 由 变化 来 告诉 应 用 程 





序 应 该 进行 哪 种 过 渡 类 型 ( 从 左 到 右 、 从 右 到 左 、 模 态 ， 等 等 )。 从 上 面 的 讨论 中 ， 我 们 知道 它 将 发 
生 在 之 前 定义 的 configureScene( ) 方 法 中 : 


configureScene(route) { 
// 配置 场景 
} 

















传递 给 renderScene( ) 方 法 的 route 对 象 同时 也 会 传递 给 configureScene() 方 法 。 可 以 在 























configureScene( ) 方 法 中 使 用 与 renderScene( ) 方 法 相同 的 逻辑 : 


src/app/index.js 





configureScene(route) { 


if (route.home === true) { 


// 过 渡 到 HomeContainer 组 件 
} else if (route.notifications === true) { 
// 过 渡 到 NotificationsContainer 组 件 


} else { 


// 展示 FooterTabsContainer 组 件 


} 
} 














这 里 我 们 会 告诉 <Navigator /> 组 件 在 过 渡 到 新 UI 时 要 使 用 哪 种 过 渡 类 型 ， 而 不 是 泻 染 组 件 。 
<Navigator /对象 具有 10 种 不 同类 型 的 场景 配置 ,所 有 这 些 都 位 于 Navigator .SceneConfigs 对 象 上 。 


Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 
Navigator .SceneCon 


Navigator .SceneCon 








Navigator .SceneCon 


figs 





figs. 
figs. 
figs. 
figs. 
figs. 
figs. 


figs. 


figs. 


figs. 











PushFromRight (默认 ) 
FloatFromRight 
FloatFromLeft 
FloatFromBottom 
FloatFromBottomAndroid 
FadeAndroid 


HorizontalSwipeJump 


.HorizontalSwipeJumpFromRight 


VerticalUpSwipeJump 


VerticalDownSwipeJump 
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我 们 从 configureScene( ) 方 法 返回 的 配置 将 是 用 于 特定 路 由 更 改 的 过 渡 类 型 。 

假设 用 户 是 在 10S 上 ,我 们 希望 除了 通知 路 由 外 的 每 个 路 由 都 有 标准 的 从 左 到 右 的 过 渡 ， 而 希 
望 通知 路 由 从 底部 向 上 作为 模 态 过 渡 。 可 以 通过 更 新 configureScene( ) 方 法 来 实现 这 个 行为 ， 如 下 
所 示 : 























src/app/index.js 
configureScene(route) { 
if (route.notifications === true) { 
return Navigator.SceneConfigs.FloatFromBottom; 
} 


return Navigator.SceneConfigs.FloatFromRight; 


} 


renderScene(route, navigator) { 


if (route.home === true) { 
return <HomeContainer navigator={navigator} /> 
} else if (route.notifications === true) { 
return <NotificationsContainer navigator={navigator} /> 
} else { 
return <FooterTabsContainer navigator={navigator} /> 
} 
} 
render() { 
return ( 
<Navigator 


TrenderScene={this.renderScene} 
configureScene={this.configureScene} 
/> 
} 


























现在 , 当 用 户 导航 到 通知 视图 时 , 我 们 将 看 到 一 个 很 好 的 FloatFromBottom 过 渡 。 对 于 其 他 路 由 ， 
我 们 将 获得 默认 的 FloatFromRight 过 渡 ， 因 为 它 是 在 configureScene( ) 方 法 中 指定 的 。 

前 面谈 到 了 Android 与 iOS 相 比 在 路 由 过 渡 方 面 有 根本 不 同 ， 下 面 来 看 如 何 实现 。 

为 了 检测 应 用 程序 当前 运行 在 哪个 平台 上 , 可 以 使 用 react-native 包 导 出 的 Platform 对 象 , 首 
先 需要 导出 来 自 react-native 的 Platform: 


src/app/index.js 




























































































import { Platform } from 'react-native'; 


























Ud 





来 


< 


Platform 对 象 有 一 个 名 为 08 的 属性 , 它 有 一 个 字符 示 应 用 程序 当前 使 用 的 平台 。 对 于 iOS， 
该 字符 串 是 'i0S' ， 对 于 安 章 ， 则 是 'androigq'。 


src/app/index.js 





























configureScene(route) { 
if (route.notifications === true) { 
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if (Platform.0S === 'android') { 
return Navigator.SceneConfigs.FloatFromBottomAndroid; 
} else { 
return Navigator.SceneConfigs.FloatFromBottom; 
} 
} 
return Navigator.SceneConfigs.FloatFromRight; 
} 
renderScene(route, navigator) { 
if (route.home === true) { 
return <HomeContainer navigator={navigator} /> 
} else if (route.notifications === true) { 
return <NotificationsContainer navigator={navigator} /> 
} else { 
return <FooterTabsContainer navigator={navigator} /> 
} 
} 
render() { 
return ( 
<Navigator 


renderScene={this .renderScene} 
configureScene={this .configureScene} 
/> 
); 
} 











现在 ， 如 果 我 们 在 安 卓 设备 〈 或 模拟 需 ) 上 导航 到 通知 路 由 ， 那 么 会 得 到 FloatFromBottom- 
Android 过 渡 ， 而 在 iOS 设备 上 仍 会 得 到 FloatFromBottom。 

有 了 <Navigator /> 组 件 ， 我们 现在 就 可 以 在 React Native 应 用 程序 中 使 用 路 由 了 ， 它 既 适 用 于 
Android， 也 适用 于 iOS。 









































16.4 Web 组 件 与 原生 组 件 


我 们 将 遇 到 的 React 和 React-Native 之 间 第 一 个 区 别 是 内 置 组 件 的 区 别 。 


在 Web 上 ， 我们 可 以 使 用 原生 的 浏览 器 组 件 ， 如 <cdiv /> 、a /，>、<span /> 等 。 但 在 原生 应 用 
程序 中 ， 这 些 元 素 并 不 存在 。 由 于 我 们 依赖 底层 的 原生 UI 层 来 泻 染 布局 ， 因 此 不 能 使 用 原生 的 web 元 
素 ， 相 反 ， 必 须 使 用 UI 构建 器 知道 如 何 泻 染 的 元 素 。 幸 运 的 是 ，React-Native 为 我 们 导出 了 一 堆 底 层 视 
图 管理 器 能 够 理解 的 开 箱 即 用 的 视图 元 素 ( 并 且 使 用 它们 也 能 很 容易 地 创建 我 们 自己 的 视图 元 素 )。 

大 多 数 情况 下 ， 这 些 元 素 在 概念 上 没有 太 大 的 区 别 ， 因 此 我 们 不 会 深入 探讨 这 些 区 别 ， 不 过 会 介 
绍 一 些 在 创建 React Native 应 用 程序 中 最 常用 的 内 置 组 件 。 


下 面 的 内 置 组 件 列表 是 最 常用 的 组 件 。 由 于 React-Native 生态 系统 非常 活跃 ， 因 此 如 果 你 的 应 用 
程序 需要 一 个 特定 的 组 件 ， 那 么 它 可 能 已 为 你 构建 好 了 ( 如 果 它 还 没有 实现 到 React Native 核心 中 )。 
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在 实现 自己 的 组 件 之 前 ,请 检查 它 是 否 已 经 构建 了 ,可 以 通过 npm 网 站 搜索 react-native 或 JS.coach 
网 站 搜索 react-native 进行 查找 。 


16.4.1 «<View /> 


<View /> 组 件 是 使 用 React Native 构建 UI 的 最 基本 组 件 。 该 组 件 会 直接 映射 到 当前 运行 应 用 程序 
的 平台 的 原生 等 效 组 件 。 它 会 映射 到 iOS 上 的 UIView 和 Android 上 的 androigd.view, 甚至 是 Web 中 
的 cdiv />。 可 以 像 在 Web 上 使 用 cdiv /> 一样 使 用 cvView /> 组 件 。 


















































16.4.2 «Text /> 


<Text /> 组 件 用 于 在 React Native 应 用 程序 中 显示 文本 。 需 要 注意 的 是 ， 我 们 无 法 泻 染 没有 包装 
在 <Text> 文 本 组 件 </Text> 中 的 任何 纯 文 本 。 因 为 视图 层 不 知道 如 何 处 理 它 ， 所 以 在 向 视图 添加 纯 文 
本 时 必须 显 式 定义 。 






























































16.4.3 “Image /> 


当 我 们 想 要 显示 各 种 类 型 的 图 像 ， 包 括 网 络 图 像 、 吏 态 资 源 、 临 时 本 地 图 像 和 本 地 设备 ( 例如 相 
机 胶卷 / 库 ) 的 图 像 时 ， 可 以 使 用 cImage /> 组 件 。 












































16.4.4 “TextInput /> 

就 像 在 Web 上 一 样 , 我们 可 以 使 用 一 个 名 为 TextInput /> 的 输入 字段 从 用 户 那 里 获得 用 户 输入 。 
<TextInput /> 组 件 是 我 们 从 设备 上 的 键盘 获取 输入 的 主要 方式 。 它 接收 的 一 个 特定 属性 是 
onCchangeText( ) ， 并 会 在 输入 字段 中 的 文本 发 生变 化 时 调用 这 个 函数 。 


















































16.4.5 “TouchableHighlight />、<TouchableOpacity /> 和 
<TouchableWithoutFeedback /> 


当 我 们 想 要 监听 React Native 中 的 新 闻 事 件 时 ， 需 要 使 用 一 种 可 触摸 的 组 件 。 当 我 们 第 一 次 使 用 
React Native 时 ， 这 些 可 触摸 的 组 件 常常 让 人 感到 困惑 ， 因 为 在 Web 中， 我 们 只 需 向 元 素 添加 一 个 
onClick() 属 性 ， 它 就 会 变 成 “可 触摸 的 ”。 

然而 ，React Native 中 组 件 的 属性 不 仅 不 是 onclick() ( 它 是 onPress() )， 咀 ReactNative 中 的 
大 多 数组 件 不 知道 如 何 处 理 onPress( ) 属 性 。 因 此 ， 需 要 将 我 们 感 兴趣 的 所 有 模块 包装 在 这 些 可 触摸 
的 组 件 中 。 

每 个 不 同 的 可 触摸 组 件 在 被 触摸 时 的 效果 都 略 有 不 同 。 

@ “TouchableHighlight /> 组 件 将 降低 组 件 的 不 透明 度 ， 并 允许 底 色 透 过 组 件 。 

@ <TouchableOpacity /> 会 降低 组 件 的 不 透明 度 ， 但 不 显示 底 色 。 

@ ‘TouchableWithoutFeedback /> 在 按 下 组 件 时 会 调用 该 组 件 ， 但 不 会 向 用 户 提 供 任 何 有 关 组 

件 本 身 的 反馈 。 

我 们 将 尽量 少 使 用 cTouchableWithoutFeedback /> 组件， 因为 最 经 常 希望 在 按 下 可 触摸 组 件 时 。 人 

向 用 户 提供 反馈 。 16 
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少 用 TouchableWithoutFeedback /> 组 件 
通常 情况 下 , 我 们 和 希望 向 用 户 反馈 可 触摸 组 件 已 被 按 下 。 这 是 移动 Web 浏览 器 不 像 原 生 应 用 程序 
的 主要 原因 之 一 。 





16.4.6 «<ActivityIndicator /> 

React Native 的 默认 加 载 指示 器 是 cActivityIndicator /组 件 。. 这 个 组 件 可 以 在 多 个 平台 上 工作 ， 
因为 它 完 全 是 用 JavaScript 实现 的 。 使 用 完全 用 JavaScript 编写 的 组 件 的 一 个 好 处 是 , 默认 样式 会 根据 
应 用 程序 运行 的 平台 进行 更 新 ， 而 无 须 进 行 任何 定制 。 












































16.4.7 <WebView /> 
<WebView /> 组 件 允 许 我 们 在 React Native 应 用 程序 中 显示 一 些 Web 内 容 。 





16.4.8 «<ScrollView /> 


<ScrollView /组 件 允 许 我 们 滚动 视图 。 在 Web 中 ， 这 通常 是 自动 处 理 的 (并且 可 以 在 CSS 中 
控制 和 定义 )。 但 在 原生 应 用 程序 中 ， 如 果 内 容 离 开 了 屏幕 ， 我 们 将 无 法 看 到 它 。 在 原生 应 用 程序 中 ， 
我 们 希望 用 户 在 发 生 这 种 情况 时 能 够 深 动 内 容 。 这 就 是 我 们 使 用 cScrollView /> 组 件 的 地 方 。 

如 果 内 容 比 屏幕 大 (意味 着 我 们 必须 滚动 才能 看 到 它 )， 那 么 我 们 将 把 eview /> 包装 在 
<ScrollView /> 组 件 中 。 

请 记 住 ，<ScrollView /> 组 件 最 适合 相对 较 小 的 项 目 列表 ， 因 为 高 性 能 的 列表 对 于 良好 的 移动 用 
户 体 验 至 关 重 要 。<ScrollView /> 组 件 会 演 染 cScrollView /> 中 的 所 有 元 素 和 视图 ， 无 论 它们 是 否 
显示 在 屏幕 上 。 因 此 ，React Native 提供 了 男 一 种 更 高 效 的 方式 ， 即 使 用 <ListView /> 来 演 染 更 大 的 
列表 。 


















































































































































16.4.9 :ListView /> 
<ListView /> 组 件 是 一 个 以 性 能 为 中 心 的 选择 ， 可 用 于 泻 染 长 数据 列表 。 与 <ScrollView /组件 
不 同 的 是 ，<ListView /> 只 演 染 当前 在 屏幕 上 显示 的 元 素 。 一 个 有 趣 的 事情 是 ，<ListView /在 底 
层 使 用 了 <ScrollView /、，， 但 它 为 我 们 增加 了 很 多 不 错 的 性 能 抽象 。 
由 于 高 性 能 的 列表 是 构建 原生 应 用 程序 的 基础 ， 而 且 ListVievw 与 我 们 在 Web 中 使 用 的 列表 稍 有 
不 同 ， 因 此 让 我 们 更 详细 地 研究 一 下 如 何 使 用 <ListView />。 

假设 我 们 正在 构建 一 个 类 似 于 Twitter 的 应 用 程序 ， 并 希望 创建 一 个 Feed 组 件 ， 该 组 件 将 接收 一 
个 推 文 数组 并 将 这 些 推 文 演 染 给 视图 。 让 我 们 看 看 如 何在 Web 上 做 到 这 一 点 ， 先 使 用 ScrollView， 接 
着 再 使 用 ListView 进行 实现 。( 我 们 将 故意 忽略 样式 ， 因 为 这 不 是 本 练习 的 重点 。) 

我 们 可 以 在 Web 上 这 样 实现 ， 如 下 所 示 。 



















































































































































































16.4 Web 组 件 与 原生 组 件 579 





1. Web 版 本 


src/feed.js 





import PropTypes from 'prop-types'; 
import React from 'react'; 


Feed.propTypes = { 
tweets: PropTypes.arrayOf(PropTypes.shape(l{ 
name: PropTypes.string.isRequired, 
user_id: PropTypes.string.isRequired, 
avatar: PropTypes.string.isRequired, 
text: PropTypes.string.isRequired, 
numberOfFavorites: PropTypes.number .isRequired ， 
numberOfRetweets: PropTypes .number .isRequired ， 
})).isRequired, 





}; 
function Feed({ tweets }) { 
return ( 
<div> 
{tweets.map((tweet) => ( 
<div> 
<div> 
<img alt="tweet" src={tweet.avatar} /> 
<span> {tweet .name} </span> 
</div> 
<py> {tweet .text}</p> 
<div> 
<div>Favs: {tweet.numberOfFavorites}</div> 
<div>RTs: {tweet.numberOfRetweets}</div> 
</div> 
</div> 
) 
)} 
</div> 


); 
} 





我 们 有 一 个 名 为 Feed 的 无 状态 函数 式 组 件 , 它 接收 一 个 tweets 数组 ,并 为 每 个 tweet 进行 映射 ， 
然后 为 每 个 tweet 显示 一 些 UI ( 在 本 例 中 为 带 有 一 些 子 元 素 的 cdiv /> )。 


2. x<ScrollView /> 版 本 
可 以 使 用 cScrollview /> 组 件 实 现 相 同 的 功能 ， 如 下 所 示 : 


src/app/twitter-scrollview.js 
































import React, { PropTypes } from 'react'; 
import { View, Text, ScrollView, Image } from 'react-native'; 


Feed.propTypes = { 
tweets: PropTypes.arrayOf(PropTypes.shape(l{ 
name: PropTypes.string.isRequired, 
user_id: PropTypes.string.isRequired, 
avatar: PropTypes.string.isRequired, 
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text: PropTypes.string.isRequired, 
numberOfFavorites: PropTypes.number .isRequired, 
numberOfRetweets: PropTypes.number.isRequiredqd, 
})).isRequired, 
撑 


function Feed({ tweets }) { 
return ( 
<ScrollView> 
{tweets.map( (tweet) => ( 
<View> 
<View> 
<Image src={tweet.avatar} /> 
<Text> {tweet .name}</Text> 
</Viewy》 
<Text> {tweet .text}</Text> 
<View> 
<Text>Favs: {tweet.numberOfFavorites}</Text> 
<Text>RTs: {tweet.numberOfRetweets}</Text> 
</View> 
</Viewy》> 
) 
)} 
</ScrollView> 
); 
} 











请 注意 ,这 个 实现 与 我 们 在 Web 上 使 用 的 实现 非常 相似 。 我 们 只 是 将 特定 的 Web 组 件 替换 为 React 
Native 的 组 件 ， 但 映射 每 个 tweet 的 实际 逻辑 是 相同 的 。 

下 面 来 看 如 何 使 用 更 高 性 能 的 <Listview /> 元 素来 实现 相同 的 功能 。 

不 要 担心 这 里 的 细节 ， 因 为 我 们 很 快 就 会 对 如 何 使 用 cListview /> 组 件 进行 详细 介绍 。 我 们 将 以 
此 为 例 来 突出 说 明 使 用 cListview /> 实现 相同 功能 方面 的 差异 。 


src/app/twitter-listview.js 






























































import React, { PropTypes, Component } from 'react'; 
import { View, Text, ScrollView, Image, ListView } from 'react-native'; 


class Feed extends Component { 
static props = { 

tweets: PropTypes .arrayOf(PropTypes .shape({ 
name: PropTypes.string.isRequired, 
user_id: PropTypes.string.isRequired, 
avatar: PropTypes.string.isRequired, 
text: PropTypes.string.isRequired, 
numberOfFavorites: PropTypes.number .isRequired, 
numberOfRetweets: PropTypes .number .isRequired ， 

})).isRequired, 


} 


constructor(props) { 
super(props); 
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this.ds = new ListView.DataSource({ 
rowHasChanged: (ri, r2) => IT1 !== r2, 


}); 


this.state = { 
dataSource: this.ds.cloneWithRows(this.props.tweets), 
}; 
} 


componentWillReceiveProps(nextProps) { 
if (nextProps.tweets !== this.props.tweets) { 
this.setState({ 
dataSource: this.ds.cloneWithRows(nextProps .tweets), 


1 
} 
} 
renderRow = ({ tweet }) => { 
return ( 
<View> 
《<View> 
<Image src={tweet.avatar} /> 
<Text> {tweet .name}</Text> 
</View> 
<Text> {tweet .text}</Text> 
《<View> 
<Text>Favs: {tweet.numberOfFavorites}</Text> 
<Text>RTs: {tweet.numberOfRetweets}</Text> 
</View> 
</View> 
} 
render() { 
return ( 
<ListView 
renderRow={this .renderRow} 
dataSource={this .state.dataSource} 
7 
六 
} 





<ListView /> 的 实现 有 很 大 不 同 。 让 我 们 来 看 这 些 不 同 之 处 。 

我 们 会 看 到 的 第 一 件 事 是 将 无 状态 函数 式 组 件 切换 为 允许 保持 状态 的 类 组 件 。 这 是 因为 组 件 需 要 
跟踪 当前 呈现 在 屏幕 上 的 数据 ， 并 监听 通过 shouldComponentupdate() 生 命 周期 Hook 来 更 新 数据 的 
请 求 。 

当 使 用 <Listview /> 组 件 时 ， 我们 需要 做 两 件 事 才能 正确 实现 它 ， 如 下 所 示 : 

@ ListView.DataSource 实例 ; 

@ 在 组 件 中 定义 的 renderRow( ) 函数 。 
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ListView.DataSource 实例 有 点 出 乎 意料 ， 因 此 让 我 们 先 来 看 一 下 。 我 们 将 看 到 ， 首 先 需 要 创建 
一 个 ListView.DataSource 类 型 的 新 实例 ， 并 给 它 传递 一 个 允许 我 们 自 定义 其 内 部 工作 方式 的 对 象 
在 这 里 ,我 们 给 它 传递 了 一 个 rowHasChanged() 方 法 ,这 是 <ListView /> 组 件 用 来 确定 是 否 需 要 重新 
演 染 列表 的 函数 。 


src/app/twitter-listview.js 














0 


























this.ds = new ListView.DataSource({ 
rowHasChanged: (ri1, r2) => r1 !== r2 
}); 











退 一 步 来 说 ,如果 我 们 考虑 创建 高 性 能 列表 视图 的 基本 方面 ， 就 能 轻松 检测 列表 中 的 行 何 时 发 和 9 
变化 ， 以 避免 重新 泻 染 未 更 改 的 行 ， 这 非常 重要 。 这 是 <ListVi 








让 





iew /> 为 我 们 自动 处 理 的 第 一 个 优化 。 
下 一 步 是 实际 提供 ListView.DataSource 实例 的 数据 来 跟踪 并 显示 给 用 户 。 这 就 是 ds .clone- 
WithRows( ) 方 法 的 工作 原理 。ds .cloneWithRows( ) 方 法 将 设置 (或 更 新 ) 由 ListView.DataSource 
实例 内 部 保留 的 数据 。 















































src/app/twitter-listview.js 


this.state = { 





dataSource: this.ds.cloneWithRows(this.props.tweets) 
}; 





注意 ， 我 们 在 constructor( ) 哺 数 和 getDerivedStateFromProps() 方 法 中 都 使 用 了 ds .clone- 
WithRows() 方 法 。 


src/app/twitter-listview.js 


























getDerivedStateFromProps(nextProps) { 
if (nextProps.tweets !== this.props.tweets) { 
this .setState({ 
dataSource: this.ds.cloneWithRows(nextProps .tweets) 
}); 
} 
} 








在 这 两 种 情况 下 , 我 们 都 会 接收 要 在 屏幕 上 显示 的 推 文 , 因此 需要 确保 将 它们 添加 到 dataSource 
实例 变量 中 ,这 意味 着 在 这 两 种 情况 下 都 需要 调 月 


日 cloneWithRows( ) 方 法 。 如 果 不 调用 cloneWithRows() 
(或 该 方法 的 其 他 “亲戚 ”, 稍 后 将 详细 介绍 ), 那么 ListView.DataSource 实例 上 由 


4 数据 将 不 会 更 新 。 
不 可 变数 据 




























































































由 dataSource 实例 对 象 保 存 的 数据 是 不 可 变 的 。 不 可 变 对 象 是 无 法 更 新 或 修改 的 。 它 
一 旦 被 创建 ， 就 不 能 修改 或 更 新 。 


当 我 们 确实 想 要 修改 数据 时 ， 必 须 在 其 他 地 方 创建 一 个 单独 的 数据 副本 ， 以 便 能 更 新 本 
地 副本 并 使 用 该 数据 调用 cloneWithRows()。 


虽然 这 可 能 看 起 来 是 一 个 限制 ， 但 这 是 一 个 巨大 的 性 能 优化 ， 这 是 我 们 与 ListView 
DataSource 对 象 进行 交互 的 方式 。 
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前 面 的 示例 中 没有 保留 之 前 tweets 的 副本 ,因为 每 次 更 改 时 我 们 都 会 收 到 全 新 的 tweet 
数组 。 但是， 如 果 这 些 更 改 是 增 量 的 ( 需要 添加 /删除 tweet )， 那 么 我 们 需要 在 其 他 地 方 保 
留 不 在 DataSource 中 存储 的 数据 的 副本 。 








现在 已 将 数据 保存 在 dataSource 实例 对 象 中 ， 要 实现 一 个 renderRow( ) 函数 。 这 个 更 直 
接 一 点 ，dataSource 实例 的 数据 副本 中 的 每 一 行 都 会 调用 renderRow( ) 方 法 ， 并 负责 为 每 一 行 提 供 
一 个 要 泻 染 的 UI 组 件 。 


src/app/twitter-listview.js 









































renderRow = tweet => { 
return ( 
《<View> 
<View> 
<Image source={{uri: tweet.avatar}} /> 
<Text> {tweet .name} </Text> 
</Viewy》> 
<Viewy> 
<Text> {tweet .text}</Text> 
<Text>Favs: {tweet.numberOfFavorites}</Text> 
<Text>RTs: {tweet.numberOfRetweets}</Text> 
</Viewy》> 
</Viewy> 
) 





注意 ， 从 <ScrollView /> 转换 为 cListView /实现 时 ， 我 们 将 数据 中 的 .map() 调 用 从 render() 
函数 中 移出 ， 并 将 其 转换 为 renderRow( ) 函数 。 可 以 将 renderRow( ) 函数 中 的 JSX 当 作 .map( ) 函数 中 
的 JSX 对 待 ， 因 为 dataSource 实例 中 的 每 个 项 目 都 将 调用 它 。 


<ListView /组件 可 以 接收 一 些 其 他 的 属性 ， 这 里 不 会 详细 介绍 它们 ， 但 知道 它们 的 存在 是 很 有 
用 的 。 我 们 会 查看 一 下 renderSeparator()、 2 ) 和 renderFooter()。 

这 些 额 外 的 属性 都 是 可 以 自 解释 的 ， 但 让 我 们 来 看 每 个 属性 。 

3. renderSeparator() 

当 renderSeparator( ) 作 为 属性 传递 给 cListview /组件 时 ， 它 是 用 于 负责 返回 一 个 组 件 的 也 
数 ， 该 组 件 将 被 演 染 为 cListview /> 中 每 个 项 目 之 间 的 分 隔 符 。 

使 用 renderSeparator() 属 性 而 不 是 向 组 件 的 样式 添加 边框 是 明智 的 做 法 , 因为 它 不 会 向 最 后 演 
染 的 行 添加 边框 

src/app/twitter-listview.js 































































































出 








TrenderSeparator = (sectionId，rowId) => { 
return View key={rowId} style={styles.separator} /> ; 


把 


render() { 
return ( 
<ListView 
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renderRow={this .renderRow} 
dataSource={this .state.dataSource} 
renderSeparator={this .renderSeparator} 
/> 
); 
} 





4. renderHeader() 

renderHeader( ) 属 性 接收 一 个 函数 , 该 函数 应 返回 一 个 组 件 , 该 组 件 将 用 作 <ListView /组件 的 
头 部 。 例 如 ， 假 设 我 们 想 要 在 Feed 组 件 的 顶部 添加 一 个 用 于 过 滤 内 容 的 搜索 栏 ， 那 么 可 以 使 用 
renderHeader( ) 方 法 来 实现 。 









































src/app/twitter-listview.js 





renderHeader = () => <SearchBar />; 


render() { 
return ( 
<ListView 
renderRow={this .renderRow} 
dataSource={this .state.dataSource} 
renderHeader={this.renderHeader} 
> 
好 
} 





5. renderFooter() 
renderFooter() 属 性 允许 我 们 在 Listview 中 添加 一 个 页 脚 。 例 如 , 我 们 可 能 想 要 显示 一 个 按钮 ， 
以 允许 用 户 从 推 文 列表 中 获取 更 多 推 文 。 


src/app/twitter-listview.js 





























renderFooter = () => <ShowMoreTweets />; 


render() { 
return ( 
<ListView 
renderRow={this .renderRow} 
dataSource={this .state.dataSource} 
renderFooter={this.renderFooter} 
/> 
Di 
} 





16.5 ”样式 


React Native 中 的 样式 不 像 Web 中 的 样式 那样 直接 。React Native 将 层 和 至 样式 表 (或 简称 CSS ) 的 
样式 化 思想 引入 原生 应 用 程序 的 世界 ， 在 这 里 我 们 将 样式 化 声明 应 用 到 组 件 。 正 如 我 们 在 整个 课程 中 
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对 React 所 做 的 那样 ， 可 以 在 大 多 数 元 素 上 使 用 style 属性 将 CSS 规则 应 用 于 React 组 件 中 。React 
Native 对 其 元 素 使 用 了 与 React 相同 的 方法 。 

在 深入 介绍 如 何 对 React Native 组 件 进行 样式 设置 之 前 , 需要 注意 的 是 , React Native 使 用 的 106@% 
的 样式 设置 都 是 在 JavaScript 方 法 中 完成 的 。 也 就 是 说 ， 每 个 核心 组 件 都 接收 一 个 style 属性 ， 该 属 
性 接受 一 个 包含 组 件 样 式 的 对 象 ( 或 对 象 数 组 )。 在 JavaScript 中 ,包含 -的 属性 必须 以 稍微 不 同 的 方 
式 处 理 。 我 们 需要 以 驼峰 式 ( camel-case ) 命名 样式 属性 , 而 不 是 background-color 或 margin-left。 

如 果 想 要 向 一 个 组 件 添 加 一 个 背景 颜色 样式 ， 则 可 以 这 么 添加 : 

src/app/styledViews.js 















































































































































<View style={{ backgroundColor: 'green', padding: 10 }}> 
<Text style={{ color: 'blue', fontSize: 25 }}>» 
Hello world 
<“/Text> 
</Viewy> 





React Native 引入 的 一 个 不 错 的 特性 ( React 的 Web 版 本 中 并 没有 此 特性 ) 是 ， 它 可 以 将 数组 传递 
给 style 属性 (不 需要 单独 的 库 )， 而 React Native 会 将 它们 合并 成 一 个 单独 的 样式 。 
src/app/styledViews.js 





























const ContainerComponent = () => { 
const getBackgroundColor = () => { 
return { backgroundColor: 'red' }; 


sy 


return ( 
<View style={[ getBackgroundColor(), { padding: 10 } ]}» 
<Text style={{ color: 'blue', fontSize: 25 }}» 
Hello world 
</Text> 
</Viewy> 
好 
3 




















就 像 现在 一 样 ， 这 很 简单 。 如 果 一 个 组 件 有 超过 2~3 个 样式 的 属性 该 怎么 办 呢 ? 对 于 这 种 情况 ， 
React Native 会 导出 一 个 名 为 StyleSheet 的 辅助 程序 。StyleSheet 允许 我 们 创建 一 个 抽象 ， 就 像 处 
理 基 于 Web 的 CSS 样式 表 一 样 。 



































16.5.1 StyleSheet 


StyleSheet 对 象 上 有 一 个 create() 方 法 ， 它 接收 一 个 包含 样式 列表 的 对 象 。 然 后 ， 可 以 使 用 
create( ) 方 法 返回 的 styles 对 象 ， 而 不 是 原生 的 样式 对 象 。 


让 我 们 装饰 一 些 组 件 : 
src/app/styledViews.js 


























const styles = StyleSheet .create({ 
container: { 
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padding: 10, 
}; 
containerText: { 
color: "blue '， 
fontSize: 20, 
}, 
有 


class ExampleComponent extends Component { 
getBackgroundColor() { 
return { 
backgroundColor: 'yellow’ 
}; 
} 


render() { 
return ( 
<View style={|[ 
this.getBackgroundColor(), 
styles.container 
1}> 
<Text style={styles.containerText}> 
Hello world 
</Text> 
</Viewy》> 
) 
} 
} 


























使 用 StyleSheet 方法 有 一 些 好 处 。 一 个 好 处 是 组 件 更 具 可 读 性 。 更 重要 的 是 ，StyleSheet 为 我 
们 提供 了 一 些 直接 将 对 象 应 用 到 styles 属性 时 无 法 获得 的 性 能 收益 。 

现在 我 们 已 了 解 了 如 何 应 用 样式 ， 下 面 进入 样式 的 体系 结构 并 使 用 Flexbox。 
16.5.2 flexbox 

flexbox 作为 一 种 技术 的 存在 , 它 使 我 们 能 够 以 一 种 有 效 的 方式 来 定义 布局 。 我 们 可 以 在 容器 中 的 
各 项 之 间 进 行 布局 、 对 齐 和 分 配 空间 , 即使 该 组 件 的 大 小 是 未 知 或 者 是 动态 的 ,使 用 CSS 创建 动态 的 、 
通用 的 布局 可 能 很 麻烦 ， 而 flexbox 可 以 使 这 一 切 变 得 更 加 简单 。 

换 句 话说 ，flexbox 就 是 用 来 创建 动态 布局 的 。 

flexbox 背后 的 主要 概念 是 让 父 元 素 能 够 控制 所 有 子 元 素 的 布局 , 而 不 是 让 每 个 子 元 素 控制 它们 自 
己 的 布局 。 当 我 们 给 父 元 素 这 个 控制 时 , 父 元 素 就 变 成 了 一 个 flex 容器 , 其 中 的 子 元 素 就 被 称 为 flex 项。 

例如 ， 无须 让 元 素 的 所 有 子 元 素 都 左 移 或 为 每 个 元 素 都 添加 边 距 ， 只 需 让 父 元 素 指定 其 所 有 子 元 
素 都 排列 在 一 行 中 即 可 。 通 过 这 种 方式 ， 布 局 职责 就 从 子 组 件 转移 到 了 父 组 件 ， 这 总 体 上 可 以 使 我 们 
更 好 地 控制 应 用 程序 的 布局 。 
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要 理解 flexbox 最 重要 的 概念 是 它 基 于 不 同 的 轴 ， 我们 有 一 个 主轴 和 一 个 交叉 轴 ( 见 图 16-3 )。 





图 16-3 一 个 主轴 和 一 个 交叉 轴 

默认 情况 下 ，React Native 的 主轴 是 垂直 的 ， 而 交叉 轴 是 水 平 的 。 从 这 里 开始 ， 以 后 的 内 容 都 会 
建立 在 轴 的 概念 上 。 当 我 们 说 “将 所 有 子 元 素 沿 主轴 对 齐 ” 时 ， 意 思 是 在 默认 情况 下 ， 父 元 素 的 子 元 
素 将 从 上 到 下 垂直 布局 ;， 当 我 们 说 这 将 所 有 子 元 素 在 交叉 轴 上 对 齐 时 ， 意思 是 在 默认 情况 下 ， 子 元 素 
将 从 左 到 右 水 平 放 置 。 

flexbox 概念 的 其 余部 分 决定 了 如 何 沿 主轴 和 交叉 轴 对 齐 、 定 位 、 拉 伸 、 展 开 、 收 缩 、 居 中 以 及 包 
装 子 元 素 。 

让 我 们 来 看 flexbox 的 属性 。 

flex-direction 

在 谈论 主轴 和 交叉 轴 时 ,我们 一 直 非 常 谨慎 地 在 说 默认 行为 。 这 是 因为 实际 上 可 以 更 改 哪 个 轴 是 
主轴 ， 哪 个 轴 是 交叉 轴 。 可 以 使 用 flex-direction (在 ReactNative 中 ， 它 是 flexDirection ) 来 指 
定 这 个 属性 。 

它 可 以 接收 以 下 两 个 值 之 一 : 


@ column 





















































®@ row 

默认 情况 下 ，React Native 将 所 有 元 素 设置 为 flexDirection: column 属性 。 也 就 是 说 ， 元 素 的 
主轴 是 垂直 的 ， 交 义 轴 是 水 平 的 ， 如 图 16-3 所 示 。 但 是 ， 如 果 将 flexDirection: row 定义 为 row， 
那么 轴 就 会 切换 。 主 轴 变 成 水 平 的 ， 而 交叉 轴 则 是 垂直 的 ( 见 图 16-4 )。 
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flex-direction: row 

















16-4 主轴 是 水 平 的 ， 交 又 轴 是 垂直 的 
理解 主轴 和 交叉 轴 的 概念 非常 重要 ， 因 为 整个 布局 依赖 于 这 些 不 同 的 设置 。 
让 我 们 深入 研究 一 些 可 用 于 沿 这 些 轴 对 齐 子 元 素 的 不 同属 性 。 
首先 关注 主轴 ， 为 了 指定 子 元 素 如 何 沿 着 主轴 排列 ， 我 们 可 以 使 用 justi fyContent 属性 。 


justifyContent 属性 可 以 接收 五 个 不 同 的 值 ， 我 们 可 以 使 用 它们 来 改变 子 元 素 在 主轴 上 的 对 齐 
方式 : 






































flex-start 
center 


flex-end 


space-around 


@ space-between 
让 我 们 来 看 这 些 分 别 是 什么 意思 。 
跟着 一 起 做 
在 本 节 ， 我 们 强烈 建议 你 在 阅读 flexbox 介绍 时 与 我 们 一 起 构建 一 个 应 用 程序 。 


本 书 已 包含 了 示例 应 用 程序 ， 或 者 你 也 可 以 简单 地 创建 自己 的 应 用 程序 ， 并 将 示例 项 
目 中 的 index.ios.js 和 index.android.js 代码 替换 为 以 下 示例 代码 。 


要 创建 一 个 自己 的 示例 应 用 程序 ， 请 使 用 react-native-cli 包 ， 如 下 所 示 : 


Teact-native init FlexboxExamples 
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对 于 下 面 的 示例 ， 我 们 将 使 用 以 下 代码 来 演示 flexbox 是 如 何 布 局 子 元 素 的 : 
src/app/styledViews.js 





import React, { Component } from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 


export class FlexboxExamples extends Component { 
render() { 
return ( 
<View style={ styles.container }> 
<View style={ styles.box } /> 
<View style={ styles.box } /> 
<View style={ styles.box } /> 
</View> 
2) 
} 
} 


const styles = StyleSheet .create({ 
container: { 


flex: 1, 

并 

box: { 
height: 50, 
width: 50， 


backgroundColor: '#e76e63', 
margin: 10， 
}, 
}); 


export default FlexboxExamples; 





如 果 你 要 创建 自己 的 示例 并 蔡 换 index. [platform] .js 文件 , 请 添加 以 下 代码 , 以 确保 该 应 用 程 
序 已 经 将 React Native 注册 进来 : 

import { AppRegistry } from 'react-native'; // 在 文件 顶部 

Se 

// 在 文件 底部 

AppRegistry.registerComponent('FlexboxExamples', () => FlexboxExamples); 

在 这 段 代码 中 ， 对 于 每 个 示例 ， 我 们 唯一 要 更 改 的 是 styles 对 象 的 container 键 。 现 在 可 以 忽 
略 “flex: 1;” 属 性 ( 稍 后 再 进行 讨论 。 

使 用 上 面 的 代码 ， 我 们 有 了 一 个 应 用 程序 ， 它 的 内 容 会 沿 主轴 (垂直 轴 ) 对 齐 ， 并 添加 了 
justifyContent: 'flex-start' 键 , 这 导致 应 用 程序 中 每 个 子 元 素 都 会 朝向 主轴 的 起 点 ( 见 图 16-5 )。 
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[3 iphone 6—iOS 10.1(14872) 
Carrier 他 9:04 AM [1 


Flexbox 





图 16-5 justifyContent: 'flex-start' 


container: { 

flex: 1; 

justifyContent: 'flex-start'; 
} 


flexDirection 的 默认 值 是 column， 因 此 当 我 们 没有 给 flexDirection 设置 值 时 ， 它 被 默认 为 
column。 因 为 justifyContent 是 以 主轴 为 目标 的 ， 所 以 子 元 素 会 将 其 自身 对 齐 到 主轴 的 起 点 〈 即 左 
上 角 )， 然 后 向 下 移动 。 


当 我 们 将 值 设 置 为 justifyContent: 'center' 时 ， 子 元 素 将 朝 着 主轴 中 心 对 齐 ( 见 图 16-6 )。 





和 iphone 6-ios101414872) 
Carrier 会 12:23 PM [oa 


Flexbox 





图 16-6 justifyContent: 'flex-center' 
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container: { 
flex: 1; 


justifyContent: 'center'; 


} 





当 我 们 将 justifyContent 的 值 设置 为 flex-end 时 , 子 元 素 则 会 将 其 自身 对 齐 到 主轴 的 末端 ( 见 
图 16-7 )。 
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Carrier 会 12:26PM Ds 


Flexbox 








图 16-7 justifyContent: 'flex-end' 


container: { 
flex: 1; 


justifyContent: 'flex-end'; 
} 


还 可 以 将 justifyContent 的 值 设置 为 space-between， 这 将 对 齐 每 个 子 项 ， 以 便 每 个 子 项 之 间 
的 间隔 沿 主轴 均匀 分 布 ( 见 图 16-8 )。 


[2 iPhone6-ios101(014872) 
Carier 会 12:27 pM Ds 


Flexbox 








图 16-8 justifyContent: 'space-between' 
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container: { 
flex: 1; 
justifyContent: 'space-between'; 


} 
最 后 可 以 将 justifyContent 值 设 置 为 space-around, 它 会 对 齐 每 个 子 元 素 , 因此 主轴 上 每 个 元 
素 周 围 都 有 均匀 的 空间 ( 见 图 16-9 )。 








e iphone 6—iOS 104 (14872) 
1228 PM 


camier = m+ 


Flexbox 











图 16-9 justifyContent: 'space-around' 


container: { 
flex: 1; 
justifyContent: 'space-around'; 


} 

如 果 将 容器 的 flexDirection 值 改 为 row 而 不 是 column ， 那 么 会 发 生 什 么 呢 ? 

主轴 会 切换 为 横 轴 ， 所 有 的 子 元 素 仍 将 与 主轴 对 齐 ， 不 过 该 主轴 现在 是 水 平 的 ， 而 不 是 纵 轴 ( 见 
图 16-10 )。 














图 16-10 flexDirection: 'Trow' 
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container: { 
flex: 1; 
flexDirection: 'row', 
justifyContent: 'space-around'; 


} 

请 注意 ， 我 们 所 做 的 只 是 改变 了 flexDirection 的 值 ， 而 布局 则 是 一 个 全 新 的 、 更 新 过 的 布局 。 
具备 动态 更 新 布局 的 能 力 使 得 flexbox 变 得 异常 强大 。 

让 我 们 来 看 一 下 交叉 轴 。 为 了 指定 子 元 素 能 沿 交叉 轴 对 齐 ， 我 们 将 使 用 align-items (或 React 
Native 中 的 alignItems ) 属性 。 

与 justifyContent 值 不 同 的 是 , 设置 alignItems 属性 只 有 四 个 可 用 的 值 ， 如 下 所 示 : 























flex-start 


center 


flex-end 
@ stretch 


让 我 们 也 来 逐步 看 一 下 它们 。 
当 容 器 的 alignItems 值 被 设置 为 flex-start 时 ， 所 有 的 子 元 素 都 会 对 齐 到 交叉 轴 的 起 点 ( 见 图 
16-11 )。 





. iphone 6—iOS 101(14B72) 


Flexbox 





图 16-11 alignItems: 'flex-start' 


container: { 
flex: 1; 
alignItems: 'flex-start'; 


} 
当 容 器 的 alignItems 值 设 置 为 center 时 ， 所 有 的 子 元 素 都 会 对 齐 到 交叉 轴 的 中 间 ( 见 图 16-12 )。 16 
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Flexbox 





图 16-12 alignItems: 'center' 


container: { 
flex: 1; 
alignItems: 'center'; 


} 
当 容 器 的 alignItems 值 被 设置 为 flex-end 时 ， 所 有 的 子 元 素 都 会 对 齐 到 交叉 轴 的 末端 〈 见 图 


16-13 )。 
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Flexbox 





图 16-13 alignItems: 'flex-end' 





container: { 
flex: 1; 
alignItems: 'flex-end'; 


} 
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当 我 们 将 容器 的 alignItems 值 设置 为 stretch 时 ， 交 又 轴 上 的 每 个 子 元 素 都 将 被 拉 伸 到 交叉 轴 
的 整个 宽度 (前 提 是 在 flexDirection: row 时 没有 指定 width ， 或 者 在 flexDirection: column 时 
没有 指定 height )。 
每 当 我 们 将 alignItems 设置 为 stretch 时 ， 每 个 子 元 素 都 将 横 跨 父 容器 的 整个 宽度 或 高 度 ， 但 


前 提 是 子 元 素 未 设置 宽度 。 这 是 有 道理 的 ， 因为 如 果子 元 素 没 有 尝试 覆盖 宽度 ,flexbox 会 尝试 自动 为 
其 设置 。 

要 查看 实际 效果 ， 请 看 图 16-14。 请 注意 ， 我 们 在 这 里 也 包含 了 box 样式， 以 查看 box 样式 是 否 
也 被 更 新 了 。 

将 容器 设置 为 flexDirection: column 后 , 布局 见 图 16-14。 请 注意 , 当 我 们 使 用 flexDirection: 
column 时 ， 已 删除 了 项 态 宽 度 (width )。 
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Flexbox 





图 16-14 alignItems: 'stretch' 


container: { 
flex: 1; 
flexDirection: "column '， 
alignItems: 'stretch'; 

二 

box: { 
height: 50, 
backgroundColor: '#e76e63', 
margin: 10 


} 
将 容器 设置 为 flexDirection: row 后 ,布局 见 图 16-15。 请 注意 ， 当 我 们 使 用 flexDirection: 
row 时 ， 已 删除 了 静态 高 度 (height )。 
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container: { 
flex: 1; 


2 lBhone 0Io8 QA B72) 
Carrier 


Flexbox 


图 16-15 alignItems: 'stretch' 





flexDirection: 'row', 
alignItems: 'stretch'; 


二 

box: { 
width: 50, 
backgroundColor: 
margin: 10 


} 





'#e76e63', 





下 面 稍微 分 解 一 下 ， 
alignItems 会 将 子 元 素 











由 于 flexDirection: row 设置 为 row， 因 此 主轴 现在 水 平 运行 。 这 意味 着 
各 纵 轴 ( 新 的 交叉 轴 ) 对 齐 。 由 于 我 们 已 删除 了 子 元 素 的 高 度 并 将 alignItems 














设置 为 stretch， 因 此 现在 子 元 素 将 沿 着 纵 轴 ( 交 义 轴 ) 拉 伸 到 父 组 件 的 整个 长 度 。 对 于 这 个 例子 ， 


就 是 整个 视图 的 高 度 。 











至 此 , 我 们 一 直 在 使 用 单个 flex 容器 或 父 元 素 。 如 果 我 们 创建 府 套 的 flex 容器 ,同样 的 逻辑 也 适 











用 于 机 套 的 容器 子 元 素 ( flex 子 项 )。 它们 将 根据 谷 套 的 父 组 件 定位 自己 ， 而 不 是 相对 于 整个 视图 (就 








像 前 面 的 例子 那样 )。 我 介 








] 的 整个 UI 都 将 构建 在 嵌 套 的 flex 容器 之 上 。 


16.5.3 ”其 他 动态 布局 
在 flexbox 中 没有 基于 百分比 的 样式 。 虽 然 这 会 使 事情 变 得 更 困难 ， 但 使 用 flexbox 来 布局 的 UI 


是 非常 强大 的 ， 因 为 无 论 








屏幕 大 小 如 何 ， A 





回想 一 下 前 面 的 例子 ， 为 什么 将 flex: 1 的 值 设置 为 1? 因为 flex 属性 允许 我 们 为 flex 容器 指 


定 相对 宽度 。 





正如 我 们 一 遍 又 一 遍地 看 到 的 那样 ，fhlexbox 关注 的 是 将 控制 权 交 给 父 元 素来 处 理 其 子 元 素 的 布 
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局 。flex 属性 有 些 不 同 ， 因 为 它 允 许 子 元 素 与 其 同 级 元 素 相 比较 来 指定 其 高 度 或 宽度 。 解 释 flex 的 
最 好 方法 就 是 看 一 些 例子 。 
让 我 们 从 图 16-16 中 的 视图 开始 。 
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Flexbox layouts 





图 16-16 视图 





它 是 使 用 以 下 样式 实现 的 : 
src/app/styledViews.js 





const styles = StyleSheet .create({ 
container: { 
flex: 1, 
flexDirection: 'row', 
justifyContent: 'center', 
alignItems: 'center', 
}; 
Box: { 
backgroundColor: '#e76e63', 
margin: 10, 
width: 50, 
height: 50, 


}); 











如 果 想 要 UI 中 有 两 个 小 盒子 围绕 着 一 个 大 盒子 ( 见 图 16-17 )， 该 怎么 办 呢 ? 
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Flexbox layouts 








图 16-17 UI 中 的 两 个 小 盒子 围绕 着 一 个 大 盒子 














可 以 使 用 完全 相同 的 布局 , 但 现在 中 间 部 分 的 宽度 是 它 周 围 两 个 部 分 的 两 倍 。flex 属性 允 ; 
对 此 进行 动态 设置 。 








src/app/styledViews.js 





Ff 我们 





import React, { Component } from 'react'; 
import { StyleSheet, View } from 'react-native'; 


const styles = StyleSheet .create({ 
container: { 
flex: 1， 
flexDirection: 'row', 
justifyContent: "center ' ， 
alignItems: "center '， 
bs; 
box: { 
backgroundColor: '#e76e63', 
margin: 10, 
width: 50， 
height: 50, 
所 
下 


export class FlexboxLayouts extends Component { 
render() { 
return ( 
<View style={[ styles.container ]}> 
<View style={[ styles.box, { flex: 1 } 
<View style={[ styles.box, { flex: 2 } ]} /> 
<View style={[ styles.box, { flex: 1 } 
</Viewy》> 
) 
} 
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} 


export default FlexboxLayouts; 





请 注意 ， 我 们 没有 添加 样式 ， 只 是 将 中 间 方 块 的 flex 属性 设置 为 flex: 2， 而 其 他 同 级 的 属性 


设置 为 flex: 1。 


可 以 这 样 理解 flexbox 布局 :“ 确 保 中 间 的 同 级 对 象 沿 主 轴 的 大 小 是 第 一 个 和 第 三 个 子 对 象 的 两 


倍 。” 这 就 是 flex 可 以 取代 基于 百分比 的 布局 的 原因 。 在 基于 百分比 的 布 


小 上 与 其 他 元 素 相对 的 布局 ， 这 正 是 我 们 在 上 面 所 做 的 。 





需要 注意 的 是 ， 如 果 我 们 将 flex: 1 放 在 一 个 元 素 上 ， 那 么 这 个 元 素 ， 











局 中 , 通常 是 特定 元 素 在 大 





各 尝试 占用 与 其 父 元 素 相同 


的 空间 。 在 上 面 的 大 多 数 例子 中 ,我们 希望 “布局 区 域 ”是 父 级 视图 的 大 小 ， 这 在 最 初 的 例子 中 是 整 











个 视图 窗口 。 
让 我 们 更 深入 地 研究 一 下 。 
如 果 想 要 图 16-18 这 样 的 布局 ， 该 怎么 办 ? 








息 iphone 6—iOS 101 (14B72) 
1:57PM 


Flexbox layouts 














图 16-18 ”给 定 三 个 盒子 的 布局 


这 个 布局 看 上 去 就 好 像 是 第 一 个 和 第 三 个 元 素 是 垂直 和 水 平 居中 的 , 但 第 二 个 元 素 一 直 在 底部 对 








齐 。 





我 们 以 flexbox 的 方式 分 解 该 布局 ， 基 本 上 是 让 第 一 个 和 第 三 个 元 素 在 主轴 上 对 齐 〈 都 届 中 )， 而 
第 二 个 元 素 则 沿 垂直 的 交叉 轴 使 用 flex-end。 为 实现 此 设计 ， 我 们 需要 一 种 让 子 元 素 覆 盖 从 其 父 元 




















素 收 到 的 特定 位 置 的 方法 。 


好 消息 是 有 一 个 align-self (在 ReactNative 中 是 alignSelf ) 属性 ， 


间 定 它 的 对 齐 方式 。alignSelf 属性 将 自己 定位 在 交叉 轴 之 间 ， 并 | 











日 














它 允 许 我 们 让 子 元 素 直 接 














具有 与 alignItems 相同 的 选项 





( 这 是 有 意义 的 ， 因 为 它 是 子 元 素 告诉 父 元 素 对 单个 元 素 设 置 alignItems 





属性 的 方式 )。 
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src/app/styledViews.js 





import React, { Component } from 'react'; 
import { StyleSheet, View } from 'react-native'; 


const styles = StyleSheet .create({ 
container: { 


flex: 1， 
flexDirection: 'row', 
justifyContent: "center ' ， 
alignItems: "Center '， 

和 

box: { 
backgroundColor: '#e76e63', 
margin: 10, 
width: 50， 
height: 50, 

le 

}); 


export class FlexboxLayouts extends Component { 
render() { 


return ( 


<View style={[ styles.container ]}> 
<View style={styles.box} /> 
<View style={[ styles.box, { alignSelf: 'flex-end' } ]} /> 
<View style={styles.box} /> 

</View> 

7 
} 
} 


export default FlexboxLayouts; 








请 注意 , 我们 为 实现 此 布局 所 做 的 只 是 向 第 二 个 子 元 素 添 加 一 个 alignSelf: flex-end 属 
属性 覆盖 了 父 元 素 设置 的 指令 ( 父 元 素 在 styles .container 


























! 设 置 为 center )。 
让 我 们 看 一 下 flexbox 在 Web 和 React Native 之 间 的 区 别 
当 我 们 听 到 “React Native 使 用 flexbox 进行 样式 设置 ”这 句 话 时 ， 其 真正 含义 是 “React Native 
具有 自己 的 flexbox (和 CSS ) 实现 ， 它 与 flexbox 类 似 ， 但 不 是 一 个 完全 的 克隆 ”。 
这 些 差异 可 以 归纳 为 两 个 部 分 : 默认 属性 和 被 排除 的 属性 。 默 认 属 性 会 自动 应 用 到 每 
被 排除 的 属性 是 存在 于 CSS/flexbox 中 的 属性 ， 但 不 存在 于 React Native 的 实现 中 
让 我 们 来 看 应 用 于 React Native 的 每 个 元 素 的 默认 值 : 


box-sizing: border-box; 
position: relative; 





o 









































个 元 素 ， 而 




















o 








display: flex; 
flex-direction: column; 
align-items: stretch; 
flex-shrink: 0; 
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align-content: flex-start; 


border: 0 solid black; 
margin: ©@; 

padding: 0; 

min-width: ©@; 


让 我 们 来 看 一 些 不 大明 显 的 属性 。 

box-sizing: border-box 

box-sizing 属性 使 元 素 的 指定 宽度 和 高 度 不 受 填充 或 边框 的 影响 ， 这 是 我 们 认为 很 自然 的 事情 ， 
但 是 浏览 器 的 实现 是 奇怪 的 ， 且 在 默认 情况 下 不 是 这 样 的 。 


flex-direction: column 















































日 


Web 上 的 flex-direction 的 默认 设置 为 row， 但 React Native 中 flexDirection 的 默认 值 则 是 


column。 








align-items: stretch 


React Native 中 的 alignItems 属性 默认 被 设置 为 stretch ， 而 在 Web 中 则 是 flex-start。 











position: relative 

通过 将 每 个 元 素 默认 设置 为 相对 定位 ， 它 可 以 使 绝对 定位 的 子 元 素 以 直接 父 元 素 为 目标 ， 而 不 是 
典型 的 “相对 位 置 或 绝对 位 置 最 近 的 父 元 素 "。 这 使 得 使 用 绝对 定位 更 加 一 致 ， 同 时 默认 情况 下 还 允 
许 left、right 、top 和 bottom 值 。 
































display: flex 

与 Web 实现 不 同 ， 我 们 无 须 设置 display: flex， 因 为 React Native 应 用 程序 中 的 每 个 元 素 都 已 
默认 设置 为 display: flex。 

下 面 来 看 存在 于 Web 但 不 存在 于 React Native 实现 的 这 些 属性 。 

flex-grow、 flex-shrink、flex-basis 

Web flexbox 中 的 有 这 三 个 可 用 属性 ， 它 们 允许 元 素 增加 或 缩小 flex 项 。React Native 有 一 个 类 似 
的 属性 叫 作 flex, 但 CSS 中 并 没有 这 三 个 相同 的 元 素 。 同 样 重要 的 是 ，React Native 中 的 flex 属性 
与 Web 中 的 工作 方式 不 同 。 

React Native 上 的 flex 是 数字 而 不 是 字符 串 , 用 于 指定 特定 组 件 大 于 或 小 于 其 兄弟 组 件 。 将 flex 
设置 为 2 的 组 件 占用 的 空间 ( 垂直 或 水 平 取决 于 其 主轴 ) 是 将 flex 设置 为 1 的 组 件 的 两 倍 。 如 果 flex 
设置 为 9, 则 该 组 件 的 大 小 将 根据 其 宽度 和 高 度 而 定 。 这 就 引出 了 下 一 个 “被 排除 ”属性 ， 即 px 之 外 
的 任何 大 小 的 单位 。 

为 了 完成 基于 百分比 的 布局 ， 我 们 必须 使 用 上 一 节 中 刚 提 到 的 flex。 

虽然 我 们 没有 直接 讨论 它们 ， 但 是 React Native 允许 我 们 使 用 CSS 中 已 惯用 的 属性 ， 比 如 
position 、zIndex 、minwidth 等 。 
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16.6 ”HTTP 请求 


到 目前 为 止 ， 我 们 只 需要 构建 一 个 React Native 应 用 程序 ， 而 无 须发 出 HTTP 请 求 并 从 外 部 API 
提取 一 些 数据 。React Native 包含 了 一 个 使 用 fetch API 发 出 HTTP 请 求 的 抽象 。fetch API 提 供 了 用 
于 获取 资源 的 接口 , 对 于 使 用 过 XMLHttpRequest 或 其 他 客户 端 ( 例如 axios 和 superagent ) 的 人 来 说 ， 
这 看 起 来 似乎 非常 熟悉 。 

fetch API 使 用 了 promise， 因 此 ， 在 我 们 开始 将 fetch API 与 React Native 结合 使 用 之 前 先 讨 论 


promise。 

































































16.7 什么 是 promise 








根据 Mozilla 的 定义 ，Promise 对 象 用 于 处 理 异 步 计算 ， 该 对 象 具有 一 些 重要 的 保证 ， 这 些 保证 
很 难 通过 回调 方法 〈 处 理 异 步 代码 的 老式 方法 ) 来 处 理 。 

Promise 对 象 只 是 一 个 值 的 包装 器 ， 该 对 象 在 实例 化 时 该 值 可 能 未 知 ， 也 可 能 已 知 ， 它 提供 了 
种 在 已 知 〈 也 称 为 resolved ) 或 由 于 故障 原因 而 无 法 使 用 (我们 将 其 称 为 rejected ) 后 ， 来 处 理 该 
值 的 方法 。 

使 用 Promise 对 象 使 我 们 有 机 会 为 异步 操作 的 最 终 成 功 或 失败 (无 论 什 么 原因 ) 来 关联 功能 。 它 
还 允许 我 们 使 用 类 似 同 步 代 码 的 方式 来 处 理 这 些 复杂 的 场景 。 

例如 ， 考 虑 下 面 的 同步 代码 ， 其 功能 是 在 JavaScript 控制 台中 打印 出 当前 时 间 : 


var currentTime = new Date(); 
console.1log('The current time is: ' + currentTime); 


这 非常 简单 ， 可 以 用 new Date() 对 象 来 表示 浏览 器 的 时 间 。 现 在 考虑 我 们 在 其 他 远程 机 器 上 使 
用 不 同 的 时 钟 。 举 个 例子 ， 如 果 我 们 要 制作 “新 年 快乐 ”的 时 钟 ， 并 且 能 够 让 用 户 浏览 器 的 时 间 值 与 
其 他 人 的 时 间 值 保 持 同 步 ， 这 样 就 不 会 有 人 错过 落 球 仪式 。 
假设 有 一 个 名 为 getCurrentTime( ) 的 方法 来 处 理 获 取 时 钟 的 当前 时 间 ， 该 方法 会 从 远程 服务 器 
获取 当前 时 间 。 现 在 使 用 setTimeout( ) 来 返回 时 间 ( 就 像 在 向 一 个 慢 的 API 发 出 请 求 ): 
function getCurrentTime() { 
// 从 API 获取 当前 的 “全 局 ”时 间 


return setTimeout(function() { 
return new Date(); 










































































































































































}，2000 ) ; 
} 
var currentTime = getCurrentTime() 
console.1og('The current time is: ' + currentTime); 


console.1og() 日 志 值 将 返回 超时 处 理 程序 ID， 它 绝对 不 是 当前 时 间 。 传 统 上 ， 可 以 更 新 代码 以 
使 用 回调 ， 以 便 在 时 间 可 用 时 进行 调用 : 


function getCurrentTime(callback) { 
// 从 API 获取 当前 的 “全 局 ”时 间 
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return setTimeout(function() { 
var currentTime = new Date(); 
callback(currentTime); 
},，20600); 
} 
getCurrentTime(function(currentTime) { 
console.1log('The current time is: ' + currentTime); 


}); 
但 是 ,假如 其 余部 分 出 错 了 怎么 办 ?如 何 捕获 错误 并 定义 重 试 或 错误 状态 ? 


function getCurrentTime(onSuccess, onFail) { 
// 从 API 获取 当前 的 “全 局 ”时 间 
return setTimeout(function() { 
// 随机 决定 是 否 检 索 日 期 
var didSucceed = Math.random() >= 0.5; 
if (didSucceed) { 
var currentTime = new Date(); 
onSuccess(currentTime); 
} else { 
onFail('Unknown error'); 
} 
},， 20600); 
} 
getCurrentTime(function(currentTime) { 
console.1log('The current time is: ' + currentTime); 
}, function(error) { 
console.1og('There was an error fetching the time'); 


}); 


现在 ， 如 果 和 希望 基于 第 一 个 请 求 值 发 出 请 求 ， 该 怎么 办 ? 举 一 个 简短 的 例子 ， 让 我 们 再 次 在 内 部 
重用 getCurrentTime() 函 数 (假设 它 是 第 二 个 方法 ， 这 可 以 让 我 们 避免 添加 另 一 个 看 起 来 很 复杂 的 
函数 ): 


function getCurrentTime(onSuccess, onFail) { 
// 从 API 获取 当前 的 “全 局 ”时 间 
return setTimeout(function() { 
// 随机 决定 是 否 检 索 日 期 
var didSucceed = Math.random() >= 0.5; 
console.1log(didSucceed); 
if (didSucceed) { 
var currentTime = new Date(); 
onSuccess(currentTime); 
} else { 
onFail('Unknown error'); 
} 
}, 20600); 
} 
getCurrentTime(function(currentTime) { 
getCurrentTime( function(newCurrentTime) { 
console.log('The real current time is: ' + currentTime); 
}, function(nestedError) { 
console.1og('There was an error fetching the second time'); 


}) 
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}, function(error) { 
console.1og('There was an error fetching the time'); 


}); 


以 这 种 方式 处 理 异步 会 很 快 变 得 复杂 起 来 。 此 外 ， 可 以 从 前 一 个 函数 调用 中 获取 值 ， 如 果 只 想 获 
取 一 个 (或 其 他 一 些 需 求 )， 那 该 怎么 办 ? 在 处 理应 用 程序 启动 时 尚 不 可 用 的 值 时 ， 有 很 多 环 手 的 情 
况 需要 处 理 。 
































进入 promise 


男 一 方面 , 使 用 promise 可 以 帮助 我 们 避免 很 多 这 种 复杂 性 ( 尽管 这 不 是 灵丹妙药 )。 之 前 的 代码 
(可 以 称 为 意大利 面条 代码 ) 可 以 变 成 更 整洁 、 更 同步 的 版 本 : 


function getCurrentTime(onSuccess, onFail) { 
// 使 用 Promise 从 API 获取 当前 的 “全 局 ”时 间 
return new Promise((resolve, reject) => { 
setTimeout(function() { 
var didSucceed = Math.random() >= 0.5; 
didSucceed ? resolve(new Date()) : reject('Error'); 
}，2000); 
}) 





























getCurrentTime( ) 
.then(currentTime => getCurrentTime( )) 
.then(currentTime => { 
console.1log('The current time is: ' + currentTime); 
return true; 


}) 
.Catch(err => console.1og('There was an error:' + err)) 

前 面 的 源 代码 示例 更 加 简洁 明了 ， 并 避免 了 很 多 国手 的 错误 处 理 /捕获 。 

为 了 捕获 成 功 时 的 值 , 我 们 将 使 用 Promise 实例 对 象 上 可 用 的 then( ) 函数 。 无 论 promise 本 身 的 
返回 值 是 什么 ， 都 将 调用 then() 函数 。 例 如 ， 在 上 面 的 示例 中 ，getCurrentTime() 函数 使 用 
currentTime( ) 值 解析 (在 成 功 完 成 时 )， 并 在 返回 值 ( 这 是 另 一 个 promise ) 上 调用 then( ) 函数 ， 依 
此 类 推 。 


要 捕获 promise 链 中 任何 地 方 发 生 的 错误 ， 可 以 使 用 catch( ) 方 法 。 


在 上 面 的 例子 中 , 我 们 使 用 一 个 promise 链 来 创建 一 个 接 一 个 被 调用 的 操作 链 。promise 链 听 起 来 
很 复杂 , 但 本 质 上 很 简单 。 本 质 上 可 以 连续 地 “同步 ”对 多 个 异步 操作 的 调用 。 每 次 对 then( ) 的 调用 
都 是 使 用 前 一 个 then( ) 函数 的 返回 值 来 进行 调用 的 。 


如 果 想 要 操作 getcurrentTime( ) 调 用 的 值 ， 那 么 可 以 在 链 中 添加 一 个 链接 ， 如 下 所 示 : 


getCurrentTime( ) 
.then(currentTime => getCurrentTime( )) 
.then(currentTime => { 
return 'It is now: ' + currentTime; 
}) 
// 添加 日 志 : "It is now: [current time]" 
.then(currentTimeMessage => console.1log(currentTimeMessage)) 
.Catch(err => console.1og('There was an error:' + err)) 
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16.8 一 次 性 使 用 保证 


一 个 promise 在 任何 时 候 只 有 以 下 三 种 状态 : 
e 等 待 中 
@ 完成 (resolved ) 
e@ 拒绝 (error ) 
一 个 等 待 中 的 promise 只 能 导致 一 次 完成 状态 或 一 次 拒绝 状态 ， 这 可 以 避免 一 些 非常 复杂 的 错误 
场景 。 这 意味 着 只 能 返回 一 次 promise。 如 果 我 们 想 要 重新 运行 一 个 使 用 promise 的 函数 ， 则 需要 创建 


一 个 新 promise。 















































16.9 创建 新 promise 


可 以 使 用 Promise 构造 函数 创建 新 promise ( 如 上 面 的 示例 所 示 )。 它 接收 一 个 函数 , 该 函数 运行 
时 需要 两 个 参数 。 

@ onSuccess (或 resolve ) 国 数 : 在 成 功 解决 时 调用 。 

@ onFail (或 reject ) 图 数 : 在 失败 拒绝 时 调用 。 

回顾 一 下 上 面 的 函数 ， 可 以 看 到 ， 如 果 请 求 成 功 ， 那 么 调用 resolve( ) 洱 数 ; 如 果 该 方法 返回 错 
误 条 件 ， 则 调用 reject( ) 函数 。 


var promise = new Promise(function(resolve, reject) { 
// 如 果 方法 成 功 ， 则 调用 resolve( ) 函 数 
Tesolve(true ) ; 


] ) 

promise.then(bool => console.1og('Bool is true')) 

现在 我 们 已 熟悉 了 promise， 下 面 在 React Native 应 用 程序 中 使 用 它 。 这 是 发 出 HTTP 请 求 的 最 简 
单 的 GET 实现 ， fetch( ) 方 法 接收 URL 作为 第 一 个 参数 ， 返 回 一 个 promise， 并 在 解析 时 包含 该 响应 
对 象 。 

假设 我 们 有 一 个 getGithubUsers( ) 函数 ， 并 和 希望 在 该 函数 中 调用 API 来 从 GitHub 获取 一 些 用 户 。 
这 个 fetch 调用 可 以 像 这 样 实现 : 

src/app/styledViews.js 





























































































































const baseUrl1l = 'https://api.github.com'; 


export const getGithubUsers = ({ offset }) => { 
return fetch(“${baseUrl}/users?since=${offset}.) 
.then(response => response. json()) 
.Catch(console.warn); 
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当然 ， 除 了 GET 请 求 外 ， 还 可 以 使 用 fetch。 可 以 通过 传递 第 二 个 参数 来 为 请 求 指定 更 多 细节 ， 
该 参数 包含 与 请 求 一 起 的 更 多 详细 信息 。 

如 果 我 们 想 要 使 用 GitHub API 创 建 一 个 关于 GitHub 的 摘要 ， 则 可 以 通过 使 用 带 有 第 二 个 参数 的 
fetch API 轻松 地 处 理 这 个 问题 。 可 以 这 样 实现 : 

src/app/styledViews.js 



































export const makeGist = ( 
activity, 
{ description = '', isPublic = true } = {} 
=> fetch(“${baseUrl}/gists., { 
method: 'POST', 
body: JSON.stringify({ 
files: { 
'activity. json': { 
content: JSON.stringify(activity ) ， 
二 
上 
description, 
public: isPublic, 
}), 
}) 


.then(response => response. json()); 


— 








fetch API 有 很 多 可 能 性 , 日 可 以 通过 React Native 的 实现 在 各 种 平台 上 使 用 。 有 关 API 的 更 多 详 
细 信 息 ， 请 访问 MDN 上 的 文档 “Using Fetch”。 























16.10 ”使 用 React Native 进行 调试 


编写 React Native 应 用 程序 附带 的 最 好 的 特性 之 一 是 调试 体验 。React Native 团队 的 主要 目标 是 采 
用 Web 上 使 用 的 开发 工作 流 ， 并 将 其 引入 原生 开发 中 。 


当 我 们 在 模拟 器 上 运行 应 用 程序 时 ， 可 以 通过 平台 的 快捷 键 来 打开 调试 菜单 。 
e@ i0S: Cmd+D (或 在 PC 上 为 CtrlL+D ) 
e@ Android: Cmd+M (或 PC 上 为 Ctrl+M) 


如 果 这 个 可 以 正常 工作 ,那么 会 打开 应 用 程序 内 符 的 开发 者 菜单 ， 见 图 16-19。 
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iPhone 6-ioS 10.1 (14B72) 


React Native: Development (RCTBatchedBridge) 


Reload 


Debug JS Remotely 


Disable Live Reload 


Start Systrace 


Enable Hot Reloading 


Show Inspector 





Show Perf Monitor 


| Cancel 


图 16-19 ”应 用 程序 内 骨 的 开发 者 菜单 
此 菜单 中 有 很 多 不 同 的 调试 选项 。 我 们 将 直接 使 用 的 是 带 有 Debug JS Remotely 标签 的 菜单 项 。 
点 击 该 菜单 项 会 在 Chrome 中 弹出 一 个 窗口 。 


如 果 在 我 们 打开 的 页 面 上 打开 开发 者 控制 台 ， 就 会 看 到 实际 上 可 以 使 用 Chrome 开发 者 工具 调试 
原生 应 用 程序 ! 
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[re 可 | Bements Console Sources Redux Finobose Network Timeine Profles Applcalion Secuity Audhs 2 2% 


四 nde comentseriptis cententscriptjs inderosjs x 为 四 | Im 六 只 @ 


1 jnport React，{ Conponent } from ‘react' | Threeds 
2 inport { StyleSheet, Text, View, AppRegistry from 'resct-—native' Nan 


3 

4 class FlexboxExanples extends Component { 
5 rende 
本 
7 
日 


urn 

<View style={styles, container}> 
<Yievw dpe poe 
ciew style={styles. /> PnctCompasneCamponent js;785 
cyiew style={styles.box}/> senderValidatedComponent Vit 
syYiew style={styles.box}/> 
<Yiew style={styles.box}/> 
<Yiew styles{styles.box}/> )eactComposlteComponenjs.811 
3 </View> | JendervnidaledCcomponen 

} pactComprsiteComponent js:353 


} pertormiritialMoLnt 


leectCompositeComponent js:221 
28 const styles = StyleSheet.createl{ | 
container: moumComponent 


fiex: 1, mountCo ReectRecoNeiler js-49 
flexyirection: “row' mponent 


justifyContent: ‘center', 
mounmtC ReaciMulliChid.ls:242 
{} Une6,Colmn 1 (source mapped fromindexiosbundla hikkren 


1 Consoe x 
© 9debvgoxWorkerjs v Preservelog @ Show al messages 
Console was cleared Gebugaer -1:75 


Running apptication "FlexboxExanples™" with appparans: {"rootTag":1,"initielprops":4}}. _DEV_ == true, developnent-—levet infolLog. js:17 
varning ere ON, performance optimizations are OFF 











图 16-20 在 打开 的 页 面 上 打开 开发 者 控制 台 看 到 的 页 面 


16.11 资料 参考 


React Native 社区 很 活跃 且 一 直 在 增长 。 


React Native 见面 会 的 数量 一 直 在 增长 ,我们 强烈 建议 你 去 看 看 。 志 界 范围 内 的 React Native 见面 
会 的 列表 可 以 在 Meetup 网 站 上 找到 。 


React Native 团队 通过 Discord 提供 了 一 个 开放 的 React Native 聊天 频道 。 
社区 资源 可 以 在 npm 网 站 上 找到 。 





PropTypes 











PropTypes 是 验证 通过 组 件 props 传递 的 值 的 一 种 方法 。 定 义 良好 的 接口 可 以 在 应 用 程序 运行 时 
为 我 们 提供 一 层 安全 保障 。 它 们 还 为 组 件 的 使 用 者 提供 了 一 层 文档 。 
































要 使 用 PropTypes ， 请 使 用 npm 安装 该 包 : 

$ npm i --save prop-types 

然后 将 该 库 导 入 所 需 的 文件 中 : 

import PropTypes from 'prop-types'; 
在 15.5.0 之 前 的 React 版 本 中 , 可 以 通过 主 React 库 访 问 PropType。 不 过 此 行为 已 
被 弃 用 。 

我 们 通过 将 PropTypes 定义 为 组 件 类 的 静态 属 必 

属性 ， 也 可 以 在 定义 好 类 之 后 设置 它们 。 
code/appendix/proptypes/Component.js 


class Component extends React.Component { 


static propTypes = { 
name: PropTypes.string 
} 
Wh 
render() { 
return (<div>{this.props.name}</div») 


} 


来 定义 它们 。 可 以 将 propTypes 设置 为 类 的 静态 



































} 








TT 











还 可 以 在 类 定义 好 之 后 将 propTypes 设置 为 组 件 的 静态 属性 。 
code/appendix/proptypes/Component.js 


class Component extends React.Component { 


A sk 
render() { 
return (<div>{this.props.name}</div») 
} 
ee 
Component .propTypes = { 
name: PropTypes.string 

















} 
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使 用 createReactClass() 定 义 propType 


在 使 用 createReactClass() 方 法 定义 组 件 时 ， 我们 将 propTypes 作为 键 传递 ， 其 
值 为 具体 的 属性 类 型 : 
const Component = createReactClass({ 
propTypes: { 
// 在 这 里 定义 propType 
} 


render: function() {} 


}); 
propTypes 对 象 的 键 定义 了 我 们 要 验证 的 属性 的 名 称 , 而 值 是 具体 的 类 型 ,由 PropTypes X 驳 (下 
面 会 讨论 ) 或 通过 自 定义 函数 来 定义 的 。 
PropTypes 对 象 导出 了 许多 验证 器 , 涵盖 了 我 们 将 遇 到 的 大 多 数 情况 。 对 于 不 太 常 见 的 情况 ,React 
也 人 允许 我 们 定义 自己 的 PropType 验证 器 。 











A.1 验证 器 


PropTypes 对 象 包含 了 一 个 公共 验证 器 列表 ( 但 我 们 也 可 以 定义 自己 的 验证 器 , 稍 后 会 详细 介绍 )。 

当 使 用 无 效 类 型 传人 一 个 属性 或 该 属性 类 型 验证 失败 时 , 则 会 向 JavaScript 控制 台 传 递 一 个 警告 。 
这 些 警告 只 会 在 开发 模式 下 显示 ， 因 此 ， 如 果 我 们 在 没有 正确 使 用 组 件 的 情况 下 却 意 外 地 将 应 用 程序 
部 署 到 生产 环境 中 时 ， 用 户 不 会 看 到 该 警告 。 


内 置 的 验证 带 如 下 所 示 : 


string 












































number 
boolean 
function 
object 
shape 
oneOf 
instanceOf 
array 
arrayOf 
node 
element 


any 


required 
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A.2 string 


























要 将 属性 定义 为 字符 串 ， 可 以 使 用 PropTypes .string。 


code/appendix/proptypes/string.js 





class Component extends React.Component { 
static propTypes = { 
name: PropTypes.string 
} 
7 
render() { 
return (<div>{this.props.name}</div») 














本 身 作为 属性 传递 ， 也 可 以 使 用 大 括号 ({} ) 来 定 





Ud 











要 将 字符 串 作为 属性 传递 ， 我们 可 以 将 字符 
义 字 符 串 变量 。 以 下 方式 在 功能 上 是 等 效 的 : 


<Component name={ "Ari"} /> 
<Component name="Ari" /> 





A.3 number 




















要 指定 一 个 属性 是 一 个 数字 ， 可 以 使 用 PropTypes .number。 


code/appendix/proptypes/number.js 





class Component extends React.Component { 
static propTypes = { 
totalCount: PropTypes.number 
} 
fA hae 
render() { 
return (<div>{this.props.totalCount}</div>) 
} 
} 














传递 数字 时 ， 必 须 将 它 作 为 JavaScript 值 或 用 大 括号 包 庄 的 变量 的 值 传 递 : 


var x = 20; 











<Component totalCount={20} /> 
<Component totalCount={x} /> 


A.4 _ boolean 


要 指定 一 个 布尔 值 (true 或 false )， 可 以 使 用 PropTypes .bool。 
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code/appendix/proptypes/bool.js 





class Component extends React.Component { 
static propTypes = { 
on: PropTypes.bool 
} 
i 
render() { 
return ( 
<div> 
{this.props.on ? 'On' : 'Off'} 
</div> 
) 
} 
} 





要 在 JSX 表达 式 中 使 用 布尔 值 ， 可 以 将 其 作为 JavaScript 值 传递 
var ison = true; 
<Component on={true} /> 


<Component on={false} /> 
<Component on={isOn} /> 


@ 一 个 使 用 布尔 值 显示 或 隐藏 内 容 的 技巧 是 使 用 && 表 达 式 。 


例如 ， 在 Component .render() 函 数 中 ， 如 果 我 们 只 想 在 on 为 真 时 才 显 示 内 容 ， 可 
以 这 样 做 : 


{lang=js, line-numbers=off 
render() { 
return ( 
<div> {this.props.on && <p>This component is on</p>} </div>)} 


A.5 function 


























也 可 以 传递 一 个 函数 作为 属性 。 要 将 一 个 属性 定义 为 一 个 函数 ， 可 以 使 用 PropTypes. func。 通 
常 在 编写 Form 组 件 时 ,我 们 会 传 入 一 个 函数 作为 提交 表单 时 ( 即 onSubmit() ) 调用 的 属性 。 通 常会 
将 一 个 属性 定义 为 组 件 上 需要 的 函数 : 


code/appendix/proptypes/func.js 














class Component extends React.Component { 

static propTypes = { 

onPress: PropTypes.func 
} 
VM 
render() { 

return ( 

<div onClick={fthis.props.onPress}> 
Press me 
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</div> 
) 
} 
} 

















可 以 使 用 JavaScript 表达 式 语法 将 函数 作为 属性 传递 ， 如 下 所 示 : 


const x = function(name) {}; 
const fn = value => alert("Value: " + value); 








<Component onComplete={x} /> 
<Component onComplete={fn} /> 


A.6 object 





可 以 通过 PropTypes .object 来 要 求 一 个 属性 是 一 个 JavaScript 对 象 : 
code/appendix/proptypes/object.js 





class Component extends React.Component { 
static propTypes = { 
user: PropTypes.object 
} 
ff 
render() { 
const { user } = this.props 
return ( 
<div> 
<hi>{user.name} </h1> 
<h5> {user .profile}</h5> 
</div> 
) 
} 
} 














发 送 对 象 作为 属性 ， 我 们 需要 使 用 JavaScript 表达 式 {} 语 法 : 


const user = { 
name: 'Ari' 


} 











<Component user={user} /> 
<Component user={{name: 'Anthony'}} /> 


A.7 对象 的 shape 属 性 


React 允许 我 们 使 用 PropTypes .shape( ) 来 定义 希望 接收 的 对 象 的 形状 。PropTypes .shape( ) 函数 
接受 一 个 具有 键 / 值 对 列表 的 对 象 ， 该 列表 指定 一 个 对 象 应 该 具有 的 键 和 值 的 类 型 : 
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code/appendix/proptypes/objectOfShape.js 


class Component extends React.Component { 
static propTypes = { 
user: PropTypes.shape({ 
name: PropTypes.string, 
profile: PropTypes.string 


}) 





} 
yO 
render() { 
const { user } = this.props 
return ( 
<div> 
<h1i>{user.name} </h1i> 
<h5> {user .profile}</h5> 
</div> 
) 
} 
} 





A.8 多 种 类 型 


我 们 有 时 事先 并 不 知道 属性 具体 是 什么 类 型 的 ， 但 可 以 接受 多 种 类 型 中 的 其 中 一 种 。React 为 我 
们 提供 了 oneof() 和 oneofType() 的 propTypes 来 处 理 这 些 情 况 。 

使 用 one0f( ) 要 求 propType 是 值 的 离散 值 ， 例 如 要 求 组 件 指 定 日 志 级 别 的 值 : 

code/appendix/proptypes/oneOf.js 


class Component extends React.Component { 
static propTypes = { 
level: PropTypes .oneOf([ 
'debug', "info'， "warning'， "error ' 
] ) 
} 
VO 
render() { 
return ( 
<div> 
<p> {this.props.1level}</p> 
</div> 
) 
} 











rl 





























} 














使 用 one0fType( ) 表 示 一 个 属性 可 以 是 多 种 类 型 之 一 。 例 如 ， 电 话 号 码 可 以 作为 字符 串 或 整数 传 
递 给 组 件 : 
code/appendix/proptypes/oneOfType.js 


class Component extends React.Component { 
static propTypes = { 


| 
出 
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phoneNumber : PropTypes .oneOfType([ 
PropTypes .number, 
PropTypes .string 
] ) 
} 
pea 
render() { 
return ( 
<div> 
<p> {this.props .phoneNumber} </p> 
</div> 
) 
} 
} 





A.9 instanceOf 














可 以 使 用 PropTypes .instance0f() 作 为 propType 的 值 来 规定 组 件 必 须 是 一 个 JavaScript 类 的 
实例 : 


code/appendix/proptypes/instanceOf.js 





class Component extends React.Component { 
static propTypes = { 
user: PropTypes.instanceOf(User) 
} 
ys ol 
render() { 
const { user } = this.props 


return ( 
<div> 
<h3> {user .name} </h3> 
</div> 
) 
} 
} 














我 们 将 使 用 JavaScript 表达 式 语法 来 传递 特定 的 属性 。 
code/appendix/proptypes/instanceOf.js 





class User { 
constructor(name) { 
this.name = name 


} 
} 





const ari = new User('Ari'); 


<Component user={ari} /> 
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A.10 array 








有 时 需要 传递 一 个 数组 作为 属性 。 要 设置 数组 ， 我 们 将 使 用 PropTypes .array 作为 值 : 
code/appendix/proptypes/array.js 











class Component extends React.Component { 
static propTypes = { 
authors: PropTypes.array 
} 
yo ON 
render() { 
const { authors } = this.props 
return ( 
<div> 
{authors && authors.map(author => { 
<AuthorCard author={author} /> 
} 六 3 
</div> 
) 
} 
} 














上 





要 发 送 一 个 对 象 作为 属性 ， 我 们 需要 使 用 JavaScript 表达 式 {} 语 法 : 


const users = [ 
{name: 'Ari'} 
{name: 'Anthony'} 
用 


三 


<Component authors={[{name: 'Anthony'}]} /> 
<Component authors={users} /> 


A.11 数组 的 类 型 


React 允许 我 们 使 用 PropTypes .arrayOf() 来 指定 数组 中 每 个 成 员 应 该 使 用 的 值 类 型 : 
code/appendix/proptypes/arrayOfType.js 



































class Component extends React.Component { 
static propTypes = { 
authors: PropTypes .arrayOf(PropTypes.object) 
} 
和 
render() { 
const { authors } = this.props 
return ( 
<div> 
{authors && authors.map(author => { 
<AuthorCard author={author} /> 
})} 


</div> 
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) 
} 
} 








我 们 将 使 用 JavaScript 表达 式 {} 语 法 来 传递 一 个 数组 : 


const users = [ 
{name: 'Ari'} 
{name: 'Anthony'} 
本 


<Component authors={[{name: 'Anthony'}]} /> 
<Component authors={users} /> 


A.12 node 


我 们 还 可 以 传递 任何 可 以 泻 染 的 内 容 ， 比 如 数字 、 











用 PropTypes .node 来 包含 它们 
code/appendix/proptypes/node.js 








字符 串 、DOM 元 素 、 数 组 或 者 片段 ， 可 以 使 





class Component extends React .Component { 
static propTypes = { 
icon: PropTypes .node 
} 
HA i 
render() { 
const { icon } = this.props 
return ( 
<div> 
{icon} 
</div> 
) 
} 
} 


























将 节点 作为 属性 传递 也 很 简单 。 当 要 求 组 件 具 有 子 组 件 或 设置 自 定义 元 素 时 ,将 节点 作为 值 传递 














通常 很 有 用 。 女 








I 





<Component icon={icon} /> 
<Component icon={"fa fa-cog"} /> 


A.13 element 





React 的 灵活 性 允许 我 们 使 用 PropTypes .element 来 传递 另 一 个 React 元 素 作 为 属性 。 














果 我 们 希望 允许 用 户 传递 图 标 名 称 或 自 定 义 组 件 的 名 称 ， 那 么 可 以 使 用 节点 propType。 


const icon = 《FontAwesomeIcon name="user" /> 





可 以 构建 自己 的 组 件 ， 以 允许 用 户 能 够 通过 组 件 的 接口 指定 自 定义 组 件 。 例如, 我们 可 能 有 一 个 
负责 输出 元 素 列表 的 <List /> 组件。 如 果 没 有 自 定义 组 件 ， 我 们 将 不 得 不 为 要 泻 染 的 每 种 类 型 的 列表 
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构建 一 个 单独 的 <List />React 组 件 (这 可 能 是 合适 的 ， 取 决 于 元 素 的 行为 )。 通 
们 可 以 重用 cList /> 组 件 。 


例如 ， 列 表 组 件 可 能 看 起 来 如 下 所 示 : 
code/appendix/proptypes/element.js 




















过 传递 





组 件 类 型 


9， 我 





class Component extends React.Component { 
static propTypes = { 
listComponent: PropTypes.element, 
list: PropTypes.array 
} 
Ya 
render() { 
const { list } = this.props 
return ( 
<Ul> 
{list.map(this.renderListItem)} 
</U1> 
) 
} 
} 











无 论 是 否 指 定 自 定义 组 件 ， 我们 都 可 以 使 用 此 列表 组 件 : 
code/appendix/proptypes/element.js 





const Item = function(props) { 
return ( 
<div> {props.children}</div> 
) 
} 





<List list={[1, 2, 3]} /> 
<List list={[1, 2, 3]} listComponent={Item} /> 


A.14 any 类 型 


Reacti a 定 一 个 属 
来 做 到 这 一 点 : 


code/appendix/proptypes/any.js 











ma 




















必须 存在 ， 不 管 它 是 什么 类 型 。 可 以 使 用 PropTypes .any 验证 器 





class Component extends React .Component { 

static propTypes = { 

mustBePresent : PropTypes .any 
} 
YA 
render() { 

return ( 

<div> 


Is here: {this.props.mustBePresent} 
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</div> 
) 
} 
} 





A.15 ”可 选 的 props 和 必需 的 props 
除非 男 有 说 明 ， 否则 所 有 的 属性 都 是 可 选 的 。 要 将 一 个 属性 传递 给 组 件 并 进行 验证 ,我 们 可 以 在 
[个 propType 验证 后 附加 .isRequired。 
如 果 有 一 个 函数 必须 在 组 件 加 载 完成 后 并 且 执行 完 一 些 操 作 后 被 调用 ， 那 么 我 们 可 以 这 样 指定 : 
code/appendix/proptypes/optional.js 














Ne 





























class Component extends React.Component { 
static propTypes = { 
// 可 选 属 性 
onStart: PropTypes.func, 
// 必需 属性 
onComplete: PropTypes.func.isRequired, 
name: PropTypes.string.isRequired 
} 
A ni 
startTimer = (seconds=5) => { 
const { onStart, onComplete } = this.props 
onStart() 
setTimeout(() => onComplete(), seconds) 
} 
JAA a 
render() { 
const { name } = this.props 
return ( 
<div onClick={this.startTimer}> 
{name} 
</div> 
) 
} 
} 





A.16” 自 定义 验证 器 
React 允许 我 们 为 默认 验证 函数 无 法 涵盖 的 所 有 其 他 情况 指定 自 定义 验证 函数 。 为 了 编写 自 定义 
验证 ， 我 们 将 指定 一 个 接收 三 个 参数 的 函数 : 
(1) 传递 给 组 件 的 props; 
(2) 被 验证 的 propName ; 
(3) 要 验证 的 componentName。 
如 果 验 证 通过 ,那么 我 们 就 可 以 运行 该 函数 并 返回 想 要 的 内 容 。 只 有 在 Error 对 象 被 触发 时 验证 
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函数 才 会 失败 ( 例如 new Error() )。 
































Yr 





如 果 我 们 有 一 个 接受 通过 验证 的 用 户 的 加 载 器 ， 则 可 以 对 该 属性 
code/appendix/proptypes/custom.js 











人 


运行 一 


个 自 定义 函数 : 





class Component extends React.Component { 
static propTypes = { 
user: function(props, propName, componentName) { 
const user = props[propName] ; 
if (luser.isValid()) { 
return new Error('Invalid user'); 
J. 
} 
} 
ef 
render() { 
const { user } = this.props 
return ( 
<div> 
{user .name} 
</div> 
) 
} 
} 





User 类 可 能 看 起 来 如 下 所 示 : 


code/appendix/proptypes/custom.js 








class User { 
constructor(name) { 
this.name = name 
} 
isValid() { 
// 必须 包含 名 称 
return !!this.name && new Error('Name must be present') 
} 
} 





ES6 














本 附录 是 ES6 添加 到 JavaScript 的 新 语法 特性 和 方法 的 非 详尽 列表 。 这 些 特性 是 非常 常用 且 非 常 
有 帮助 的 。 

虽然 本 附录 没有 涵盖 ES6 类, 但 我 们 在 学 习 本 书 中 的 组 件 时 会 介绍 这 些 基础 知识 。 此 外 ， 本 附录 
也 不 包括 对 一 些 更 大 的 新 特性 ( 如 promise 和 生成 器 ) 的 描述 。 如 果 想 要 更 多 有 关 这 些 主 题 或 以 下 任 
何 主题 的 信息 ， 建 议 参 考 MDN Web Docs 网 站 。 























B.1 首选 const 和 1let 而 不 是 var 





如 果 你 以 前 使 用 过 ES5 JavaScript， 那 么 可 能 会 经 常 看 到 用 var 声明 的 变量 : 


appendix/es6/const_ let.js 





var myVariable = 5; 

















const 语句 和 let 语句 也 都 用 来 声明 变量 。 它 们 是 在 ES6 中 引入 的 。 


const 是 在 变量 不 会 被 重新 分 配 值 的 情况 下 使 用 的 。 使 用 const 可 以 让 代码 更 加 清晰 。 它 表示 变 
量 在 其 定义 的 上 下 文中 是 “常量 ”状态 。 


如 果 变 量 的 值 要 重新 分 配 ， 则 可 以 使 用 let 。 

我 们 鼓励 使 用 const 和 let 来 代替 var 。 除 了 const 引入 的 限制 外 ，const 和 1et 都 是 块 作 用 域 
而 不 是 函数 作用 域 。 这 个 作用 域 可 以 帮助 避免 意外 的 错误 。 
B.2 ”箭头 函数 


Er 

















































































































Ww 




















与 第 头 函 数 体 有 三 种 方法 。 假 设 我 们 有 一 个 城市 对 象 数组 ， 如 下 所 示 : 


appendix/es6/arrow_funcs.js 





const cities = [ 
{ name: 'Cairo', pop: 7764700 }, 
{ name: 'Lagos', pop: 8029200 }, 
dE; 




















如 果 编 写 跨越 多 行 的 箭头 函 数 ， 则 必须 使 用 大 括号 来 分 隔 函 数 体 ， 如 下 所 示 : 


622 附录 B ES6 





appendix/es6/arrow_funcs.js 





const formattedPopulations = cities.map((city) => { 
const popMM = (city.pop / 1000000) .toFixed(2); 
return popMM + ' million'; 

}); 

console.1og(formattedPopulations ) ; 

// -> [ "7.76 million"，"8.03 million" ] 











请 注意 ,我 们 还 必须 显 式 为 函数 指定 一 个 返回 值 。 
但 是 ， 如 果 我 们 编写 的 函数 体 只 有 一 行 ( 或 一 个 表达 式 )， 则 可 以 使 用 括号 来 分 隔 它 : 


appendix/es6/arrow_funcs.js 





























const formattedPopulations2 = cities.map((city) => ( 
(city.pop / 1000000) .toFixed(2) + ' million' 
)); 














值得 注意 的 是 ,我们 没有 使 用 return ， 因 为 它 是 隐 含 着 的 。 
此 外 ， 如 果 函 数 体 很 简洁 ， 则 可 以 这 样 写 ; 


appendix/es6/arrow_funcs.js 








T 











const pops = cities.map(city => city.pop); 
console.10g(pops); 
// [ 7764700，8629266 ] 





























箭头 函数 的 简洁 性 是 我 们 使 用 它 的 两 个 原因 之 一 。 将 上 面 的 单行 代码 与 下 面 的 代码 进行 比较 : 


appendix/es6/arrow_funcs.js 


























const popsNoArrow = cities.map(function(city) { return city.pop }); 








过， 更 大 的 好 处 是 箭头 函数 绑 定 this 对 象 的 方式 。 


传统 的 JavaScript 函数 声明 语法 (function( ){} ) 会 在 匿名 函数 中 将 this 绑 定 到 全 局 对 象 。 为 
了 说 明 这 种 情况 引起 的 混淆 ， 请 考虑 以 下 示例 : 


appendix/es6/arrow_funcs jukebox_1.js 





function printSong() { 
console.1og("0ops - The Global Object"); 


} 
const jukebox = { 
songs: [ 
{ 


title: "Wanna Be Startin' Somethin'", 
artist: "Michael Jackson", 


{ 
title: "Superstar", 
artist: "Madonna", 


二 


附录 B ES6 623 





]; 
printSong: function (song) { 
console.log(song.title + " -~ " + song.artist); 
下 
printSongs: function () { 
// "this' 可 以 绑 定 到 对 象 
this .songs. forEach(function(song) { 
// 'this ' 无 法 绑 定 到 全 局 对 象 
this.printSong(song ) ; 
] ) ; 
}, 
} 


jukebox.printSongs(); 
// > "0ops - The Global Object" 
// > "0ops - The Global Object" 











printSongs( ) 方 法 使 用 forEach( ) 对 this.songs 进行 遍历 。 在 这 个 上 下 文中 , this 能 按 预 期 绑 
定 到 对 象 ( jukebox )， 但 传递 给 forEach( ) 的 匿名 函数 会 将 其 内 部 的 this 绑 定 到 全 局 对 象 。 因 此 ， 
this.printSong(song) 会 调用 在 示例 项 部 声明 的 函数 ， 而 不 是 在 jukebox 上 的 方法 。 

传统 上 ，JavaScript 开发 人 员 在 碰 到 此 行为 时 会 使 用 变通 办 法 ， 但 是 箭头 函数 可 以 通过 捕获 封闭 
上 下 文 的 this 值 来 解决 这 个 问题 。 因 此 使 用 printSongs() 的 箭头 函数 可 以 得 到 预期 的 结果 ， 如 下 
所 示 : 


appendix/es6/arrow_funcs_ jukebox 2.js 




























































































printSongs: function () { 
this.songs.forEach((song) => { 
// 'this' 会 绑 定 到 和 printSongs() (jukebox) 相 同 的 this 
this.printSong(song); 
}); 
和 
} 


jukebox.printSongs(); 
// > "Wanna Be Starting' Something' ~- Michael Jackson" 


// > "Superstar - Madonna" 











因此 ， 在 整 本 书 中 ， 我 们 对 所 有 匿名 函数 都 使 用 了 箭头 函数 。 


B.3 模块 


ES6 正式 支持 使 用 import/export 语法 的 模块 。 

















命名 export 


在 任何 文件 中 ， 你 都 可 以 使 用 export 指定 模块 应 公开 的 变量 。 下 面 是 一 个 导出 两 个 函数 的 文件 
示例 : 
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// greetings.js 


export const sayHi = () => (console.1log('Hi!')); 
export const sayBye = () => (console.1log('Bye!')); 


const saySomething = () => (console.1log('Something!')); 


现在 可 以 在 任何 地 方 使 用 import 来 使 用 这 些 函 数 。 我 们 需要 指定 要 导入 哪些 函数 。 一 种 常见 的 
方法 是 使 用 ES6 的 解构 赋值 语法 来 列 出 它们 ， 如 下 所 示 : 


// app.js 




















import { sayHi, sayBye } from './greetings'; 


sayHi(); // -> Hil 

sayBye(); // => Bye! 

重要 的 是 ， 未 导出 的 函数 (saySomething ) 在 模块 外 部 不 可 使 用 。 

还 需 注 意 的 是 ， 我 们 给 from 提供 了 一 个 相对 路 径 ， 表 明 该 ES6 模块 是 一 个 本 地 文件 ， 而 不 是 一 
个 npm 包 。 

可 以 使 用 以 下 话 法 在 一 个 区 域 中 列 出 所 有 公开 的 变量 ， 而 无 须 在 要 导出 的 每 个 变量 之 前 搬 和 人 
export 语句 : 






































// greetings.js 


const sayHi = () => (console.1log('Hi!')); 
const sayBye = () => (console.1og('Bye!')); 


const saySomething = () => (console.1log('Something!')); 


export { sayHi, sayBye }; 
还 可 以 使 用 import * as <Namespace> 语 法 来 指定 在 给 定 命名 空间 下 要 导入 模块 的 所 有 功能 : 


// app.js 

















import * as Greetings from './greetings'; 


Greetings.sayHi(); 
// -> Hil 
Greetings.sayBye( ) ; 
// => Byel 
Greetings.saySomething( ); 
// => TypeError: Greetings.saySomething is not a function 


默认 导出 
另 一 种 导出 类 型 是 默认 导出 ， 且 一 个 模块 只 能 包含 一 个 默认 导出 : 


// greetings.js 





const sayHi = () => (console.log('Hi!')); 
const sayBye = () => (console.1og('Bye!')); 
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const saySomething = () => (console.1log('Something!')); 

const Greetings = { sayHi, sayBye }; 

export default Greetings; 

这 是 一 些 库 使 用 的 常见 模式 。 这 意味 着 你 可 以 轻松 地 批量 导入 库 , 而 无 须 指 定 所 需 的 每 个 函数 : 


// app.js 























import Greetings from './greetings'; 


Greetings.sayHi(); // -> Hil 

Greetings.sayBye(); // => Bye! 

模块 同时 使 用 命名 导出 和 默认 导出 并 不 少见 。 例 如 ， 可 以 使 用 react-donm 像 下 面 这 样 导 入 ReactDOM 
(默认 导出 ): 


import ReactDOM from 'react-dom'; 














ReactDOM.render( 
OE: 
Xe 


或 者 ， 如 果 你 只 打算 使 用 render( ) 函数 ， 则 可 以 像 下 函 


import { render } from 'react-dom’'; 








这 样 导 入 指定 的 render( ) 函数 : 

















render( 
J 
2 


为 了 实现 这 种 灵活 性 ，react-donm 的 导出 实现 如 下 所 示 : 
// 模仿 的 react-dom.js 


export const render = (component, target) => { 
J 
壤 


const ReactDOM = { 
render, 

A 其 他 函数 
}; 


export default ReactDOM ; 
如 果 你 想 玩 一 玩 模块 语法 ， 请 查看 code/webpack/es6-modules 文件 夹 。 
有 关 ES6 模块 的 更 多 信息 ， 请 参见 Mozilla 网 站 上 的 文章 “ES6 In Depth 一 Modules”。 








B.4 Object.assign() 
在 本 书 中 我 们 经 常 使 用 0bject .assign()， 并 会 在 创建 现 有 对 象 的 修改 版 本 的 地 方 使 用 它 。 
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Object .assign( ) 接 收 任意 数量 的 对 象 作为 参数 。 当 函数 接收 到 两 个 参数 时 ， 它 会 将 第 二 个 对 象 
的 属性 复制 到 第 一 个 对 象 上 ， 如 下 所 示 : 


appendix/es6/object assign.js 











const coffee = { }; 

const noCream = { cream: false }; 
const noMilk = { milk: false }; 
Object.assign(coffee, noCream); 

// coffee 的 值 现在 是 { cream: false } 























将 三 个 参数 传递 给 0bject .assign( ) 是 惯用 的 方式 。 第 一 个 参数 是 一 个 新 的 JavaScript 对 象 ， 且 
Object .assign( ) 最 终 将 返回 该 对 象 ; 第 二 个 是 我 们 想 要 构建 其 属性 的 对 象 ; 最 后 一 个 是 我 们 想 要 应 
用 的 变化 : 


appendix/es6/object assign.js 























const coffeeWithMilk = Object.assign({}, coffee, { milk: true }); 
// coffeeWithMilk 的 值 是 { cream: false, milk: true } 
// coffee 的 值 没有 变化 : { cream: false, milk: false } 





Object .assign() 是 处 理 “ 不 可 变性 ”的 JavaScript 对 象 的 便捷 方法 。 
B.5 模板 字面 量 


在 ES5 JavaScript 中 ， 可 以 像 下 面 这 样 在 字符 串 中 插入 变量 : 
appendix/es6/template literals 1.js 





























图 





var greeting = 'Hello, ' + User + '! It is ' + degF + ' degrees outside.'; 











使 用 了 ES6 模 板 文字 后 ， 可 以 像 下 面 这 样 创建 相同 的 字符 串 : 
appendix/es6/template_ literals 2.js 





const greeting = “Hello, ${user}! It is ${degF} degrees outside..; 





B.6 扩展 操作 符 (...) 


在 数组 中 ,省略 号 (... ) 操作 符 会 将 随后 的 数组 展开 为 父 数 组 。 扩 展 操 作 符 使 我 们 能 够 简洁 地 
将 新 数组 构造 为 现 有 数组 的 组 合 。 



































下 面 是 一 个 例子 : 
appendix/es6/spread operator arrays.js 
const a= [1,2,31]; 

const b= [4,5,61]; 

const c=[ ...a, ...b, 7, 8, 9 |]; 


console.log(c); // -> [ 1, 2, 3, 4, 5, 6, 7, 8, 9] 
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注意 看 这 和 我 们 下 面 这 样 写 有 何不 同 : 


appendix/es6/spread operator arrays.js 




















const d= [a,b,7,8,91]; 
console.1log(d); // -> [ [1,2,3],[4,5,61],7,8,9] 





B.7 对 象 字面 量 增强 





Ca 








在 ES5 中 ， 所 有 对 象 都 需要 有 显 式 的 键 和 值 声明 : 


appendix/es6/enhanced object literals.js 





const explicit = { 
getState: getState, 
dispatch: dispatch, 














在 ES6 中 ， 只 要 属性 名 和 变量 名 相同 ， 就 可 以 使 用 下 面 这 种 更 简洁 的 语法 : 

















appendix/es6/enhanced object literals.js 





const implicit = { 
getstate, 
dispatch, 
}; 





























B.8 默认 参数 























使 用 ES6， 我 们 可 以 为 参数 指定 一 个 默认 值 ， 以 防 在 调用 函数 时 它 还 没有 被 定义 。 
如 下 所 示 : 
appendix/es6/default args.js 





许多 开源 库 都 使 用 了 这 种 语法 ， 因 此 熟悉 它 是 很 有 好 处 的 。 不 过 是 否 选择 在 自己 的 代码 中 使 
是 个 人 风格 偏好 的 问题 。 








ot 











function divide(a, b) { 
// divisor 默认 值 设 为 '11' 
const divisor = typeof b === 'undefined' ?1 : b; 


return a / divisor; 


} 





可 以 写成 这 样 : 
appendix/es6/default args.js 








function divide(a, b = 1) { 
return a / b; 


} 
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在 这 两 种 情况 下 ， 可 以 像 下 面 这 样 使 用 该 函数 : 
appendix/es6/default args.js 























divide(14, 2); 
// => 7 
divide(14, undefined); 
pS a 
divide(14); 
/AL 4 



































如 果 上 面 示例 中 的 参数 b 未 定义 ， 则 会 使 用 默认 参数 。 注 意 ，nul1 不 会 使 用 默认 参数 : 
appendix/es6/default args.js 











divide(14，null); // divisor 会 使 用 'null' 值 
// => 无 穷 大 // 14 / null 





B.9 解构 赋值 


B.9.1 数组 的 解构 赋值 
在 ES5 中 ， 从 数组 中 提取 和 分 配 多 个 元 素 的 过 程 如 下 所 示 : 


appendix/es6/destructuring assignments.js 








var fruits = 'apples', 'bananas', 'oranges' ]; 
var fruit1 = fruits[0]; 
var fruit2 = fruits[1]; 

















在 ES6 中 ,我 们 可 以 使 用 解构 语法 来 完成 相同 的 任务 ， 如 下 所 示 : 


appendix/es6/destructuring assignments.js 





const [ veg1，veg2 ] = [ 'asparagus', 'broccoli', 'onion' ]; 
console.1log(veg1); // -> 'asparagus' 
console.1log(veg2); // -> 'broccoli' 








左 侧 数 组 中 的 变量 被 “匹配 ”并 分 配给 右 侧 数组 中 的 相应 元 素 。 请 注意 ，'onion' 会 被 忽略 ，] 
不 会 绑 定 任何 变量 。 


B.9.2 ”对 象 的 解构 赋值 
可 以 执行 类 似 的 操作 将 对 象 属性 提取 到 变量 中 


appendix/es6/destructuring assignments.js 














| 





const smoothie = { 


fats: [ 'avocado', 'peanut butter', 'greek yogurt' ] ， 
liquids: [ "almond milk' ]， 
greens: [ 'spinach' ]， 


fruits: [ 'blueberry', 'banana' ]， 
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上 


const { liquids, fruits } = smoothie 


console.1log(liquids); // -> [ 'almond milk' ] 
console.log(fruits); // -> [ 'blueberry', 'banana' ] 





B.9.3 ”参数 上 下 文 匹 配 
可 以 使 用 相同 的 原理 将 函数 内 的 参数 绑 定 到 作为 参数 提供 的 对 象 的 属性 : 


appendix/es6/destructuring assignments.js 























const containsSpinach = ({ greens }) => { 
if (greens.find(g => g === 'spinach')) { 


return true; 
} else { 


return false; 


} 
}S 


containsSpinach(smoothie); // -> true 











我 们 经 常 使 用 函数 式 React 组 件 来 执行 此 操作 : 


appendix/es6/destructuring assignments.js 











const IngredientList = ({ ingredients, onClick }) => ( 
<U1 className= ' IngredientList '> 


{ 


ingredients .map(i => ( 


<1i 
key={i 


.id} 


onClick={() => onClick(i.id)} 
ClassName= ' item' 


> 


{i.name} 


</1i> 
)) 














在 这 里 ,我 们 使 用 











数 体内 使 用 。 











解构 赋值 将 属性 提取 到 变量 ( ingredients 和 onclick ) 中 ， 然 后 在 组 件 的 函 


React Hook 











本 附录 由 Yomi Eluwande 贡献 。 























如 果 你 一 直 在 阅读 Twitter， 可 能 知道 Hook 是 React 的 一 个 新 特性 ， 但 你 可 能 会 问 实 际 上 要 如 何 
使 用 它们 呢 ? 本 附录 将 向 你 展示 一 些 关 于 如 何 使 用 Hook 的 例子 。 


要 理解 的 一 个 关键 思想 是 ，Hook 允许 你 在 不 编写 类 的 情况 下 使 用 状态 和 其 他 React 特性 。 








C.1 警告 : Hook 还 不 完善 





在 深入 讨论 之 前 ， 有 一 点 要 着 重 提 一 下 ， 那 就 是 Hook API 还 没有 完成 。 
另外 ， 它 的 官方 文档 非常 好 ， 尤 其 是 因为 它们 扩展 Hook 的 动机 ， 我 们 建议 你 去 阅读 一 下 。 


C.2 Hook 背后 的 动机 





















































虽然 基于 组 件 的 设计 人 允许 我 们 跨 应 用 程序 重用 视图 ,但 是 React 开发 人 员 面 临 的 最 大 问题 之 一 是 
如 何 重用 组 件 之 间 的 状态 逻辑 。 当 我 们 拥有 共享 相似 状态 逻辑 的 组 件 时 , 如 果 没 有 好 的 重用 解决 方案 ， 
那么 有 时 就 会 导致 构造 函数 和 生命 周期 方法 中 的 逻辑 重复 。 


传统 上 处 理 这 种 情况 的 典型 方法 如 下 所 示 : 

e@ 使 用 高 阶 组 件 ; 

@ 泻 染 复杂 的 属性 。 

但 是 这 两 种 模式 都 有 缺点 ， 都 可 能 导致 代码 变 得 复杂 。 


Hook 旨 在 解决 所 有 这 些 问题 ， 它 使 你 能 够 编写 可 以 访问 诸如 状态 、 上 下 文 、 生 命 周 期 方法 、 引 
用 等 特性 的 函数 式 组 件 ， 而 不 需要 编写 类 组 件 











































































































[e) 


C.3 ”Hook 如 何 映 射 到 组 件 类 


如 果 你 熟悉 React, 那么 理解 Hook 的 最 佳 方法 之 一 就 是 通过 使 用 Hook 来 查看 我 们 重 现 “ 组 件 类 ” 
中 惯用 的 行为 的 方式 。 
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回想 一 下 ， 在 编写 组 件 类 时 ， 我 们 经 常 需要 做 以 下 
维护 state ; 


山中 


地 





情 : 






































使 用 生命 周期 方法 ， 如 componentDigdMount() 和 componentDidUpdate(); 
访问 上 下 文 (通过 设置 contextType )。 

通过 React Hook， 我 们 可 以 在 函数 式 组 件 中 复制 类 似 或 相同 的 行为 。 

e@ 组 件 状态 使 用 useState() Hook。 


@ 如 componentDidMount() 和 componentDidUpdate( ) 的 生命 周期 方法 会 使 用 useEffect() Hook。 
e@ 静态 contextType 使 用 useContext() Hook。 



































C.4 使 用 Hook 需 要 react "next" 包 








现在 ,你 可 以 通过 将 package .json 文件 中 的 react 和 react-dom 设置 为 next 来 开始 使 用 Hook。 


// package. json 
"react": "next", 
"react-dom": "next" 























C.5 useState() Hook 示 例 








状态 是 React 的 重要 组 成 部 分 。 它 允许 我 们 声明 保存 数据 的 状态 变量 ， 这 些 数据 会 在 应 用 程序 中 
使 用 。 对 于 类 组 件 ， 状 态 通常 是 这 样 定义 的 : 
class Example extends React .Component { 
constructor(props) { 
super(props); 
this.state = { 
count: @ 
] 
} 


在 Hook 之 前 ,状态 通常 仅 
件 中 。 

让 我 们 看 下 面 的 例子 ,这 里 将 为 灯泡 SVG 构建 一 个 开关 , 它 将 根据 状态 的 值 改变 颜色 ( 见 图 C-1 )。 
为 此 ， 我 们 将 使 用 useState Hook。 

下 面 是 完整 的 代码 ( 且 是 可 运行 的 示例 )， 我 们 将 详细 介绍 下 面 的 内 容 。 


hooks/01-react-hooks-usestate/Src/index.js 

















SA 











] 于 类 组 件 中 ,但 如 上 所 述 ，Hook 允许 我 们 将 状态 添加 到 函数 式 组 






































import React, { useState } from "react"; 
import ReactDOM from "react-dom"; 


import "./styles.css"; 


function LightBulb() { 
let [light, setLight] = useState(0); 
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const setOff = () => setLight(0); 
const setOn = () => setLight(1); 


let fillColor = light === 1 ? "#ffbb73" : "#000000"; 
return ( 
<div className="App"> 
<div> 
<LightbulbSvg fillColor={fillColor} /> 
</div> 


<button onClick={fsetOff}>Off</buttony> 
<button onClick={setOn}>On</button> 
</div> 
好 
} 


function LightbulbSvg(props) { 
return ( 
/* 
下 面 是 一 个 灯泡 形状 的 SVG 的 标记 代码 。 
重要 的 是 “填充 ”部 分 ， 这 里 会 根据 props 动态 设置 颜色 
*/ 
<svg width="56px" height="90px" viewBox="0 0 56 90" version="1.1"> 
<defs /> 
“g 
id="Page-1" 
stroke="none" 
stroke-width="1" 
fill="none" 
fill-rule="evenodd" 


<g id="noun_bulb_1912567" fill="#000000" fill-rule="nonzero"> 
<path 
d="M38.985,68.873 L17.0615,68.873 C15.615,68.873 14.48,70.009 14.48,71.40\ 
9 C14.48,72.809 15.615,73.944 17.015,73.944 L38.986,73.944 C40.386,73.944 41.521,72.\ 
809 41.521,71.4069 C41.521,70.0609 40.386,68.873 38.985,68.873 Z" 
id="Shape" 
/> 
<path 
d="M41 .521,78.592 C41.521,77.192 40.386,76.057 38.986,76.057 L17.0615,76.\ 
057 C15.615,76.0657 14.48,77.192 14.48,78.592 C14.48,79.993 15.615,81.128 17.0615,81.1\ 
28 L38.986,81.128 C40.386,81.127 41.521,79.993 41.521,78.592 2" 
id="Shape" 
/ 
<path 
d="M18.282,83.24 C17.114,83.24 16.793,83.952 17.559,84.83 L21 .806,89.682\ 
C21 .961,89.858 22.273,90 22.508,90 L33.492,90 C33.726,90 34.039,89.858 34.193,89.68\ 
2 L38.44,84.83 C39.207,83.952 38.885,83.24 37.717,83.24 L18.282,83.24 Z" 
id="Shape" 
/有 
<path 
d="M16.857,66.322 L39.142,66.322 C40.541,66.322 41.784,65.19 42.04,63.81\ 
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4 C44.63,49.959 55.886,41.575 55.886,27.887 C55.887,12.485 43.401,0 28,0 C12.599,0 0@\ 
.113,12.485 0.113,27.887 CO.113,41.575 11.369,49.958 13.959,63.814 C14.216,65.19 15.\ 


458,66.322 16.857,66.322 Z" 


id="Shape" 
fill={props.fillColor} 
is 
</g> 
</g> 
</SVvg》 


const rootElement = document .getElementById("Troot") ; 


ReactDOM.render( <LightBulb />, rootElement); 





图 C-1 灯泡 按钮 


C.5.1 我 们 的 组 件 是 一 个 函数 


在 上 面 的 代码 块 中 ， 首 先 从 react 导入 useState。useState 是 一 个 使 用 this .state 提供 


能 的 新 方法 。 

接 下 来 ， 请 注意 该 组 件 是 函数 而 非 类 。 有 趣 吧 ! 
C.5.2 状态 读 写 

在 这 个 函数 中 ， 我 们 调用 useState 来 创建 一 个 状态 


let [light, setLight] = useState(0) 


useState 用 于 声明 状态 变量 , 并 可 以 使 用 任何 类 型 
是 一 个 对 象 )。 














三 


KE 


分 星 : 








4 的 值 进 行 初始 化 ( 不 像 类 中 的 状态 , 类 型 


如 上 所 示 ， 我 们 对 useState 的 返回 值 使 用 解构 赋值 。 


第 一 个 值 (在 本 例 中 是 1ight ) 是 当前 状态 (有 点 像 this. state )。 
e 人 (第 一 个 值 ) 的 函数 ( 类似 于 传统 的 this .setstate )。 


接 下 来 创建 两 个 函数 ， 每 个 函数 会 将 状态 设置 为 不 同 的 值 (0 或 1 ): 











const setOff = () => setLight(0); 
const setOn = () => setLight(1); 


的 功 


必须 
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然后 将 这 些 函 数 用 作 视 图 中 按钮 的 事件 处 理 程序 : 


<button onClick={setOff}>0ffx</button> 
<button onClick={setOn}>On</button> 











C.5.3” React 状态 跟踪 





当 “On” 按 钮 被 按 下 时 , seton 函数 会 被 调用 , 接着 seton 会 调用 setLight(1)。 对 setLight(1) 
的 调用 将 在 下 一 次 泻 染 时 更 新 1ight 的 值 。 这 听 起 来 有 些 不 可 思议 , 但 实际 的 情况 是 React 正在 跟踪 















































该 变量 的 值 ， 并 且 在 重新 泻 染 该 组 件 时 它 会 传人 新 值 。 




















然后 使 用 当前 状态 (1ight ) 来 确定 灯泡 是 否 应 该 “打开 ”。 也 就 是 说 , 根据 1ight 的 值 设 置 SVG 
的 填充 颜色 。 如 果 1ight 值 为 6 (关闭 状态 )， 那么 fil1Color 值 设置 为 800060; 如 果 1ight 值 为 1 














(打开 状态 )， 那 么 fillcolor 值 设 置 为 tffbb73。 


C.5.4 多 个 状态 















































let [light, setLight] = useState(0); 
let [count, setCount] = useState(10); 
let [name, setName] = useState("Yomi"); 








虽然 上 面 的 示例 中 没有 这 样 做 ,但 你 可 以 通过 多 次 调用 useState 创建 多 个 状态 。 如 下 所 示 : 


注意 : 在 使 用 Hook 时 应 注意 一 些 限制 。 最 重要 的 一 点 是 ,你 只 能 在 函数 的 顶层 调用 Hook。 更 多 


信息 ， 请 参见 React 网 站 上 的 文章 “Rules of Hooks”。 


C.6 useEffect() Hook 示 例 


























useEffect() Hook 允许 你 在 函数 式 组 件 中 执行 副作用 。 副 作用 可 以 是 API 调用 、 更 新 DOM 和 




















订阅 事件 监听 器 等 一 一 任何 你 想 要 执行 “命令 ”操作 的 地 方 。 
通过 使 用 useEffect() Hook，React 知道 你 希望 在 浑 染 完成 后 执行 某 个 特定 的 操作 。 





























让 我 们 看 下 面 的 例子 。 我 们 将 使 用 useEffect() Hook 来 进行 API 调用 并 获取 响应 ( 效 组 





hooks/02-react-hooks-useeffect/src/index.js 


几 图 C-2 )。 








import React, { useState, useEffect } from "react"; 
import ReactDOM from "react-dom"; 


import "./styles.css"; 


function App() { 
let [names, setNames] = useState([]); 


useEffect(() => { 
fetch("https://uinames.com/api/?amount=25&region=nigeria") 
.then(response => response. json()) 
.then(data => { 
setNames(data); 


}); 
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}, [1); 


return ( 
<div className="App"> 
<div> 
{names.map((item, i) => ( 
<div key={i}> 
{item.name} {item.surname} 
《</div> 
))} 
/div> 
</div> 
好 
} 


const rootElement = document.getElementById("root"); 
ReactDOM.render( <App />, rootElement); 
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图 C-2 使 用 useEffect 获取 数据 
在 这 个 示例 代码 中 ，useState 和 useEffect 均 被 导入 ， 这 是 因为 我 们 希望 将 API 调用 的 结果 设 

















置 为 一 个 状态 。 


import React, { useState, useEffect } from "react"; 


C.6.1 获取 数据 并 更 新 状态 




















为 了 “使 用 副作用 ”， 我 们 需要 将 动作 放 到 useEffect 函数 中 。 也 就 是 说 ， 我 们 需要 将 副作用 的 


“动作 ”作为 一 个 匿名 函数 传递 给 useEffect 的 第 一 个 参数 。 


其 





一 














在 上 面 的 示例 中 ， 我 们 对 返回 名 称 列表 的 端点 进行 了 API 调用 。 当 response 返回 时 ， 我 们 会 将 

















转换 为 JSON， 然 后 使 用 setNames(data) 设 置 状态 。 
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let [names, setNames] = useState([] ); 


useEffect(() => { 
fetch("https://uinames.com/api/?amount=25&region=nigeria") 
.then(response => response. json()) 
.then(data => { 
setNames(data); 
} 
je 


C.6.2 ”使 用 副作用 时 的 性 能 问题 

关于 使 用 useEffect， 有 一 些 事 情 需 要 注意 。 

首先 要 考虑 的 是 , 默认 情况 下 useEffect 会 在 每 次 泻 染 时 被 调用 ! 好 消息 是 无 须 担心 过 时 的 数据 ， 
但 坏 消息 是 我 们 可 能 不 希望 在 每 次 泻 染 时 都 发 出 HTTP 请 求 ( 在 本 例 中 )。 

可 以 通过 使 用 useEffect 的 第 二 个 参数 来 跳 过 副作用 ， 就 像 我 们 在 本 例 中 所 做 的 那样 。useEffect 
的 第 二 个 参数 是 我 们 要 “观察 ”的 变量 列表 ， 然 后 仅 当 其 中 一 个 值 发 生变 化 时 才 会 重新 运行 副作用 。 
在 上 面 的 示例 代码 中 ， 注 意 我 们 传递 了 一 个 空 数 组 作为 第 二 个 参数 。 这 是 用 于 告诉 React， 我 们 
只 想 在 组 件 挂 载 时 调用 此 副作用 。 

要 了 解 更 多 关于 副作用 性 能 的 信息 ， 请 在 React 网 站 官方 文档 “Using the Effect Hook” 中 查看 此 





































































































另外 ， 就 像 上 面 的 useState 函数 一 样 ，useEffect 人 允许 多 个 实例 ， 这 意味 着 你 可 以 拥有 多 个 
useEffect 图 数 。 











C.7 useContext() Hook 示 例 


C.7.1 上 下 文 的 意义 
React 中 的 上 下 文 是 子 组 件 访问 父 组 件 中 的 值 的 一 种 方式 。 


为 了 理解 上 下 文 的 使 用 场景 ， 在 构建 React 应 用 程序 时 ， 你 通常 需要 从 React 树 的 顶部 到 底部 获 
取 值 。 如 果 没 有 上 下 文 ,你 最 终 会 通过 不 需要 使 用 props 的 组 件 来 传递 它们 。 将 props 传递 给 不 需要 
它们 的 组 件 不 仅 很 麻烦 ， 而 且 如 果 操 作 不 当 还 会 无 意 中 引 和 耦合 。 

将 props 从 “不 相关 ”的 组 件 树 中 向 下 传递 ， 被 亲切 地 称 为 props 钻 取 。 

React 上 下 文 允许 你 通过 组 件 树 与 任何 请 求 这 些 值 的 组 件 来 共享 值 ， 从 而 解决 了 props 外 取 的 
问题 。 


C.7.2 useContext() 使 上 下 文 更 易于 使 用 


通过 使 用 useContext Hook,， 使 用 上 下 文 将 比 以 往 任何 时 候 都 更 容易 。 
useContext() 国 数 接收 一 个 上 下 文 对 象 , 该 对 象 最 初 从 React .createContext() 返 回 , 接着 它 会 
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返回 当前 上 下 文 的 值 。 让 我 们 看 下 面 的 例子 (效果 见 图 C-3 )。 


hooks/03-react-hooks-usecontext/src/index.js 











import React, { useContext } from "react"; 
import ReactDOM from "react-dom"; 
import "./styles.css"; 


const JediContext = React.createContext(); 


function Display() { 
const value = useContext(JediContext); 
return <div>{value}, I am your Father.</div»; 


} 


function App() { 
return ( 
<JediContext .Provider value={"Luke"}> 
<Display /> 
</JediContext .Provider> 
他 
} 


const rootElement = document.getElementById("root"); 
ReactDOM.render( <App />, rootElement); 





Luke, I am your Father. 


图 C-3 ”上 例 的 效果 




















在 上 面 的 代码 中 ， 上 下 文 JediContext 是 使 用 React .createContext( ) 创 建 的 。 





























我 们 在 App 组 件 中 使 用 了 JediContext .Provider ， 并 将 其 中 的 value 设置 为 "Luke"。 这 意味 着 























现在 树 中 的 任何 读 取 上 下 文 的 对 象 都 可 以 读 取 该 值 。 





要 在 Display( ) 函数 中 读 取 这 个 值 , 我 们 需要 将 JediContext 作为 参数 传人 来 调 月 














H useContext。 


然后 传人 从 React . createContext 获得 的 上 下 文 对 象 ， 它 会 自动 输出 值 。 当 provider 的 值 更 新 








时 ， 此 Hook 将 使 用 最 新 上 下 文 的 值 来 触发 重新 泻 染 。 
C.7.3 ”在 更 大 的 应 用 程序 中 获取 对 上 下 文 的 引用 









































上 面 , 我 们 在 两 个 组 件 的 作用 域内 创建 了 JediCcontext , 但 在 更 大 的 应 用 程序 中 , Display 和 App 
组 件 将 位 于 不 同 的 文件 中 。 因 此 ， 如 果 你 跟 我 们 一 样 ， 可 能 也 会 想 知道 :“ 怎 样 才能 览 文件 引用 
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JediContext? 
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答案 是 你 需要 创建 一 个 导出 Jedicontext 的 新 文件 。 





例如 ， 你 可 能 有 一 个 context . js 文件 ， 其 内 容 如 下 : 


学 这 
const JediContext = React .createContext( ) ; 
export { JediContext }; 








然后 在 App.js (和 Display.js ) 中 编写 如 下 代码 : 











import { JediContext } from "./context.js"; 


C.8 useRef() Hook 示 例 





引用 提供 了 一 种 访问 在 render( ) 方 法 中 创建 的 React 元 素 的 方法 。 


如 果 你 是 React 引用 的 新 手 , 可 以 阅读 Fullstack React 网 站 的 文章 “Fullstack React's Guide to Using 
Refs in React Components”， 了 解 关于 React 引用 的 介绍 。 


useRef( ) 函数 会 返回 一 个 引用 对 象 。 

































































const refContainer = useRef(initialValue); 


useRef( ) 和 带 有 input 的 表单 
让 我 们 来 看 一 个 使 用 useRef Hook 的 例子 (效果 见 图 C-4 )。 


hooks/04-react-hooks-useref/src/index.js 























import React, { useState, useRef } from "react"; 
import ReactDOM from "react-dom"; 


import "./styles.css"; 


function App() { 


let [name, setName] = useState("Nate"); 


let nameRef = useRef(); 


const submitButton = () => { 
setName(nameRef .current .value); 


入 


return ( 
<div className="App"> 
<p> {name} </p> 


<div> 
<input ref={nameRef} type="text" /> 
<button type="button" onClick={submitButton}> 
Submit 
</button> 
</div> 
</div> 
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J 
} 


const rootElement = document.getElementById("root"); 
ReactDOM.render( <App />, rootElement); 





Nate Murray 


Nate Murray | Supmit J 


C-4 useRef 





在 上 面 的 例子 中 , 我 们 将 useRef( ) Hook 与 useState( ) 结 合 使 用 , 以 将 input 标签 的 值 泻 染 到 p 
标签 中 。 


该 引用 被 实例 化 为 nameRef 变量 。 然 后 可 以 将 nameRef 变量 设置 为 ref， 从 而 在 输入 字段 中 使 用 
它 。 本 质 上 ， 这 意味 着 现在 可 以 通过 引用 访问 输入 字段 的 内 容 。 


代码 中 的 提交 按钮 有 一 个 onclick 事件 处 理 程序 ， 名 为 submitButton。submitButton 函数 将 调 
用 setName ( 它 是 通过 useState 创建 的 )。 


正如 我 们 之 前 对 useState Hook 所 做 的 那样 ，setName 将 用 于 设置 name 状态 。 要 从 input 标签 
中 提取 名 称 ， 我 们 需要 读 取 nameRef.current.value 的 值 。 


关于 useRef 需要 注意 的 另 一 件 事 是 ， 它 可 用 于 ref 属性 之 外 的 其 他 属性 。 










































































C.9 使 用 自 定 义 Hook 


Hook 最 酷 的 特性 之 一 是 我 们 可 以 通过 创建 自 定义 的 Hook 来 轻松 地 在 多 个 组 件 之 间 共 享 逻辑 。 
在 下 面 的 例子 中 ， 我 们 将 创建 一 个 自 定义 的 setCounter() Hook， 它 允许 我 们 跟踪 状态 并 提供 自 
定义 的 状态 更 新 函数 (效果 见 图 C-5 )! 


另外 ， 请 参阅 react-use 的 useCounter Hook 和 Kent 的 useCounter Hook。 




















hooks/0S-react-hooks-custom-hooks/src/index.js 





import React, { useState } from "react"; 
import ReactDOM from "react-dom"; 
import "./styles.css"; 


function useCounter({ initialState }) { 
const [count, setCount] = useState(initialState); 
const increment = () => setCount(count + 1); 
const decrement = () => setCount(count - 1); 
return [count, { increment, decrement, setCount }]; 


} 


function App() { 
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const [myCount, { increment, decrement }] = useCounter({ initialState: 0 }); 
return ( 
<div> 
<p> {myCount } «</p> 


<button onClick={increment}>Increment</button> 
<button onClick={decrement}>Decrement</button> 
</div> 
总 
} 


const rootElement = document.getElementById("root"); 
ReactDOM.render( <App />, rootElement); 





4 


| Increment ) Decrement 





图 C-5 自 定 义 递增 Hook 





在 上 面 的 代码 块 中 ， 我 们 创建 了 一 个 useCounter 也 数 ， 它 存储 了 自 定义 Hook 的 逻辑 。 

请 注意 useCounter 可 以 使 用 其 他 Hook! 我 们 首先 通过 useState 创建 一 个 新 的 状态 Hook。 

接 下 来 定义 两 个 辅助 函数 
前 计数 。 

最 后 返回 与 Hook 交互 所 必需 的 引用 。 






































increment 和 decrement， 它 们 会 调用 setCcount 并 相应 地 调整 当 





问 : 返回 值 是 数组 的 对 象 么 ? 

答 : 就 像 Hook 中 的 大 多 数 东 西 一 样 ，API 约定 还 没有 最 终 确 定 。 不 过 我 们 在 这 里 做 的 
是 返回 一 个 数组 : 

@ 第 一 项 是 Hook 的 当前 值 ; 


和 


@ 第 二 项 是 一 个 对 象 ， 包 含 用 于 与 Hook 交互 的 函数 。 


这 个 约定 允许 我 们 轻松 地 “ 重 命名 ”Hook 的 当前 值 ， 就 像 在 上 面 对 myCount 所 做 的 
那样 。 
也 就 是 说 ， 可 以 从 自 定义 Hook 中 返回 任何 想 要 的 东西 。 








在 上 面 的 例子 中 ， 我们 使 用 increment 和 decrement 作为 视图 中 的 onclick 处 理 程序 。 当 用 户 
按 下 按钮 时 ， 计 数 器 将 更 新 并 在 视图 中 作为 myCount 重新 显示 。 
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C.10 ”为 React Hook 编 写 测 试 


为 了 编写 Hook 的 测试 ， 我 们 将 使 用 react-testing-library 对 其 进行 测试 。 

react-testing-library 是 一 个 非常 轻 量 级 的 测试 React 组 件 的 解决 方案 。 它 扩展 了 react-dom 
和 react-dom/test-utils， 以 提供 轻 量 级 的 实用 程序 功能 。 使 用 react-testing-library 可 确保 你 
的 测试 直接 在 DOM 节点 上 进行 。 

在 撰写 本 文 时 ,关于 Hook 的 测试 还 有 些 不 成 熟 。 你 目前 还 不 能 单独 测试 一 个 Hook， 而 是 需要 将 
Hook 附加 到 组 件 并 测试 该 组 件 。 

因此 ， 在 下 面 我 们 将 通过 组 件 而 不 是 直接 与 Hook 交互 来 编写 测试 。 好 消息 是 ， 我 们 的 测试 看 起 
来 会 像 普通 的 React 测试 一 样 。 
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C.10.1 为 useState() Hook 编 写 测试 


让 我 们 来 看 一 个 为 usestate( ) Hook 编写 测试 的 例子 。 在 上 面 的 课程 中 , 我 们 测试 了 上 面 使 用 的 
useState 示例 的 更 多 变 体 。 我 们 将 编写 测试 ， 以 确保 点 击 “Off ”按钮 时 将 该 状态 设置 为 0， 而 点 击 
“On” 按 钮 将 该 状态 设置 为 1。 


hooks/06-tests-for-usestate/src/_ tests testhooks.js 





















































import React from "react"; 

import { render, fireEvent, getByTest1d } from "react-testing-library"; 
// 导入 LightBulb 组 件 

import LightBulb from "../index"; 


test("bulb is on", () => { 
// 获取 已 洽 染 的 React 元 素 包 含 的 DOM 节点 
const { container } = render(<LightBulb /> ) 
// p 标签 包含 LightBulb 组 件 的 当前 状态 值 
const lightState = getByTestId(container，"1ightState") ; 
// 这 引用 了 On 按钮 
const onButton = getByTestId(container, "onButton"); 
// 这 引用 了 Off 按钮 
const offButton = getByTestId(container, "offButton"); 


// 模拟 点 击 On 按钮 

fireEvent .click(onButton); 

// 期 望 测试 的 状态 值 为 1 

expect(1ightState .textContent) .toBe("1" ) ; 

// 模拟 点 击 Off 按钮 

fireEvent.click(offButton); 

// 期 望 测 试 的 状态 值 为 @ 

expect(1lightState.textContent) .toBe( "0"); 
}); 

















在 上 面 的 代码 块 中 ,我 们 首先 从 react-testing-library 和 要 测试 的 组 件 中 导入 一 些 帮 助 程序 。 
e@ render: 它 将 帮助 我 们 演 染 组 件 ， 并 将 其 演 染 到 附加 于 document .body 的 容器 中 。 
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@ getByTestId: 可 以 通过 data-testid 获取 DOM 元 素 。 
@ fireEvent: 用 于 “触发 ” DOM 事件 。 它 在 document 元 素 上 附加 了 一 个 事件 处 理 程序 ， 并 通 
过 事件 委托 例如 点 击 一 个 按钮 ) 来 处 理 一 些 DOM 事件 。 
接 下 来 , 在 测试 断言 函数 中 , 我 们 为 data-testid 元 素 创建 常量 变量 , 并 在 测试 中 使 用 它们 的 值 。 
通过 引用 DOM 上 的 元 素 ， 我 们 可 以 使 用 fireEvent 方法 来 模拟 点 击 按 包 。 
该 测试 会 检查 如 果 点 击 了 onButton， 则 状态 设置 为 1， 当 点 击 offButton 时 ， 状 态 则 设置 为 0。 


C.10.2 ”为 useEffect() Hook 编 写 测试 


在 此 示例 中 ， mn ta useEffect() we 1。 该 商品 的 
数量 也 会 存储 在 1ocalStorage 中 。 在 下 面 CodeSandbox 中 的 index. js 文件 包含 了 用 于 向 购物 车 添 
加 商品 的 实际 逻辑 。 

我 们 将 进行 测试 ， 以 确保 更 新 了 购物 车 中 的 商品 数量 也 会 反映 在 localStorage 中 ， 即 使 重新 加 
载 页 面 ， 购 物 车 中 的 商品 数量 仍然 保持 不 变 


hooks/07-tests-for-useeffect/src/tests/testhooks.js 
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import React from "react"; 

import { render, fireEvent, getByTestl1d } from "react-testing-library"; 
// 导入 App 组 件 
import App from "../index"; 


test("cart item is updated", () => { 
// 将 localStorage 计数 设置 为 0 
window.1localStorage.setItem("cartIitem", 0); 
// 获取 已 泻 染 的 React 元 素 包 含 的 DOM 节点 
const { container, rerender } = render(<App /»); 
// 引用 增加 购物 车 商品 数量 的 增加 按钮 
const addButton = getByTestId(container，"addButton'" ) ; 
// 引用 重 置 按钮 ， 重 置 购物 车 商品 数量 
const resetButton = getByTestId(container, "resetButton"); 
// 引 用 显示 购物 车 商品 数量 的 p 标签 
const countTitle = getByTestld(container, "countTitle"); 
// 模拟 点 击 增加 按钮 
fireEvent .click(addButton); 
// 测试 期 望 购物 车 商品 数量 为 1 
expect(countTitle.textContent).toBe("Cart Item —- 1"); 
// 模拟 重新 加 载 应 用 程序 
rerender( <App /> ); 
// 测试 仍然 期 望 购物 车 商品 计数 为 1 
expect(window.1localStorage.getIitem("cartIitem")).toBe("1"); 
// 模拟 点 击 重 置 按钮 
fireEvent .click(resetButton ) ; 
// 测试 期 望 购物 车 商品 数量 为 @ 
expect(countTitle.textContent).toBe("Cart Item - 0"); 

}); 




















在 测试 断言 函数 中 , 我们 首先 将 localStorage 中 的 cartIten 设置 为 6, 这 意味 着 购物 车 商品 数 
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量 为 6。 然 后 通过 解构 赋值 从 App 组 件 获取 container 和 rerender。rerender 允许 我 们 模拟 重新 加 


载 页 面 。 
接 下 来 获得 对 按钮 和 p 标签 的 引用 , 用 于 
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前 购物 车 商品 数量 是 否 设 置 为 6。 
C.10.3 为 useRef() Hook 编 写 测试 























在 此 示例 中 ,我 们 将 测试 useRef() Hook, 并 使 用 上 面 的 原始 useRef 示例 作为 测试 的 基础 。 





























示 当 前 购物 车 商品 数量 , 并 将 它们 设置 为 常量 变量 。 
完成 后 , 该 测试 将 模拟 点 击 addButton 并 检查 当前 购物 车 商品 数量 是 否 为 1; 然后 重新 加 载 页 面 ， 
并 检查 localStorage 中 的 计数 (cartItem ) 是 否 也 设置 为 1。 最 后 模拟 点 击 resetButton 并 检查 当 

















useRef 


Hook 用 于 从 input 字段 获取 值 , 然后 将 其 设置 为 状态 值 。 在 下 面 CodeSandbox 中 的 index. js 文件 包 














含 了 输入 一 个 值 并 提交 它 的 逻辑 。 


hooks/08-tests-for-useref/src/tests/testhooks.js 





import React from "react"; 
import { render, fireEvent, getByTest1Id } from "react-testing-library"; 
// 导入 App 组 件 


import App from "../index"; 


test("input field is updated", () => { 
// 获取 已 洽 染 的 React 元 素 和 包含 的 DOM 节点 
const { container } = render( <App />»); 
// 引用 input 字段 
const inputName = getByTestId(container, "nameinput"); 
// 引用 p 标记 ， 用 于 显示 从 Tef 中 获得 的 值 
const name = getByTestId(container， "name" ) 
// 引用 提交 按钮 ， 用 于 将 状态 值 设置 为 ref 值 
const submitButton = getByTestId(container，"submitButton'" ) ; 
// 要 在 input 字段 中 输入 的 值 


const newName = "Yomi"; 


// 模拟 在 input 字段 中 输入 "Yomi" 值 

fireEvent.change(inputName, { target: { value: newName } }); 
// 模拟 点 击 提交 按钮 

fireEvent.click(submitButton); 

// 测试 期 望 name 引用 的 值 显示 等 于 input 字段 中 输入 的 值 
expect(name .textContent ) .toEqual(newName ) ; 


> 











在 测试 断言 函数 中 ,我 们 将 输入 字段 、 显 示 当 前 ref 值 的 p 标签 和 提交 按钮 设置 为 常量 变 























们 还 将 希望 在 输入 字段 中 输入 的 值 设置 为 newName 常量 变量 ， 用 于 在 测试 中 进行 检查 。 


fireEvent.change(inputName, { target: { value: newName } }); 
































fireEvent .change( ) 方 法 用 于 在 输入 字段 中 输入 值 , 在 本 例 中 , 它 使 用 了 存储 在 newName 闻 




















量 中 的 名 称 。 在 这 之 后 再 点 击 提交 按钮 。 
然后 该 测试 会 检查 在 按钮 被 点 击 后 引用 的 值 是 否 等 于 newName。 


三 胃 


里 o 


渤 





644 附录 C React Hook 








最 后 ， 你 应 该 会 在 控制 台中 看 到 一 条 There are no failing tests，congratulations! (没有 
失败 的 测试 ， 蔡 喜 你 ! ) 的 消息 。 





C.11 社区 对 Hook 的 反应 


自从 React Hook 的 消息 发 布 以 来 , 社区 对 这 个 特性 很 感 兴趣 ,我 们 已 看 到 了 很 多 关于 React Hook 

的 例子 和 用 例 。 以 下 是 一 些 亮点 。 
React 网 站 文章 “Collection of React Hooks” 展 示 了 React Hook 的 系列 产品 。 
react-use 是 一 个 带 有 大 量 React Hook 的 库 。 
这 个 CodeSandbox 示 例 ?说 明了 如 何 使 用 useEffect Hook 和 react-spring 来 创建 动画 。 

一 个 useMutableReducer Hook 的 示例 “, 使 你 只 需要 在 reducer 中 修改 状态 即 可 对 它 进行 更 
新 。 

这 个 CodeSandbox 示 例 “展示 了 子 级 和 父 级 通信 的 复杂 用 法 以 及 reducer 的 用 法 。 
个 使 用 React Hook 构 建 的 切换 组 件 ” 

@ React Hook 的 另 一 个 集合 ?， 具 有 用 于 输入 值 、 设备 方向 和 文档 可 见 性 的 Hook。 











































































































C.12 不 同 Hook 类 型 的 引用 


可 以 在 React 代码 中 开始 使 用 各 种 类 型 的 Hook， 如 下 所 示 。 
人 允许 我 们 编写 带 有 状态 的 纯 函 数 。 
让 我 们 可 以 执行 副作用 。 副 作用 可 能 是 API 调用 、 更 新 DOM、 订 阅 事件 监听 

















@ UseState 















































@ UseEffect 
器 等 。 


useContext 














允许 我 们 编写 带 有 上 下 文 的 纯 函 数 。 
useReducer 为 我 们 提供 了 一 个 类 Redux reducer 的 引用 。 
允许 我 们 编写 返回 可 变 ref 对 象 的 纯 函 数 。 

用 于 返回 一 个 已 存储 的 值 。 
useCallback 用 于 返回 一 个 已 存储 的 回调 。 

useImperativeMethods 用 于 定制 在 使 用 ref 时 向 父 组 件 暴露 的 实例 值 。 
与 useEffect 类 似 ， 因 为 它 允 许 执 行 DOM 变更 。 
用 于 从 DOM 读 取 布局 并 同步 重新 泻 染 

人 允许 我 们 将 组 件 逻 辑 写 人 可 重用 的 函数 中 。 






































useRef 





UseMemo 









































useMutationEffects 














useLayoutEffect 
自 定义 Hook 
































人 参见 CodeSandbox 网 站 的 ppxnl191zx 页 面 。 
@) 参见 GitHub Gist 网 站 的 aweary/App.js 页 面 
@@ 参见 CodeSandbox 网 站 的 y570vn3v9 页 面 
参见 CodeSandbox 网 站 的 m449vyk65x 页 面 
@ 参见 React 网 站 。 
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C.13” ”Hook 的 未 来 

Hook 的 伟大 之 处 在 于 , 它 可 以 与 现 有 代码 并 行 工作 , 这 样 你 就 可 以 慢 慢 地 进行 采用 Hook 的 更 改 。 
你 所 要 做 的 就 是 将 React 的 依赖 项 升级 到 具有 Hook 特性 的 版 本 。 

尽管 如 此 ，Hook 仍然 是 一 个 实验 性 的 特性 ，React 团队 已 多 次 警告 说 可 能 会 对 API 进行 修改 。 这 
一 点 需要 你 自己 考虑 清楚 。 

Hook 的 出 现 对 类 意味 着 什么 ”根据 React 团队 的 说 法 ， 类 仍 会 存在 ， 因 为 它们 是 React 代码 库 的 
重要 组 成 部 分 ， 并 且 很 可 能 还 会 存在 一 段 时 间 。 

我 们 没有 废弃 类 的 计划 。 在 Facebook， 我 们 有 成 千 上 万 的 类 组 件 ， 并 且 像 你 一 样 ， 我 们 

不 打算 重 写 它们 。 但 是 ,如 果 React 社区 支持 Hook， 那 么 采用 两 种 不 同 的 推荐 方式 来 编写 组 

件 是 没有 意义 的 。 
虽然 特定 的 Hook API 如 今 仍 处 于 试验 阶段 , 但 社区 喜欢 Hook 的 思想 ,因此 我 们 预计 它 不 会 很 快 
消失 口 

很 高 兴 能 在 应 用 程序 中 使 用 Hook! 







































































Dan Abramov 
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C.14 更 多 资源 


@ React 团队 在 React Hook 的 文档 方面 做 得 非常 出 色 ， 你 可 以 React 网 站 了 解 更 多 内 容 。 
e@ 有 关 官 方 API 参考 资料 ， 参 见 React 网 站 文档 “Hooks API Reference”。 
e@ GitHub 网 站 reactjs/rfes 页 面 有 一 个 正在 进行 的 RFC， 你 可 以 直接 去 那里 提问 或 发 表 评 论 。 





























更 新 日 志 


修订 39 - 2019-01-10 

@ 增加 了 一 个 关于 Hook 的 (实验 性 的 ) 新 章节 。 
修订 38 - 2018-12-20 

e@ 更 新 图 书 以 支持 React 16.7.0。 

修订 37 - 2018-12-19 

e@ 更 新 图 书 以 支持 React 16.6.3。 

e@ 恢复 “Relay” 一 章 为 第 15 章 。 

修订 36 - 2018-10-01 

e@ 内 部 发 布 。 

修订 35 - 2018-04-02 


e@ 更 新 以 支持 React 16.3.1。 
e 较 小 的 代码 修复 。 

@ 移 除 “Relay” 一 章 。 
修订 34 - 2017-10-17 

e@ 更 新 以 支持 React 16。 

e@ 更 正 输 入 错误 。 

e@ 较 小 的 代码 修复 。 

修订 33 - 2017-08-31 

e@ 更 正 输入 错误 。 

e@ 较 小 的 代码 修复 。 

修订 32 - 2017-06-14 

@ 修复 了 Spotify API 更改 在 第 9 章 中 引入 的 错误 。 
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9 
e@ 语言 和 格式 修复 。 
修订 31 - 2017-05-18 
e@ 更 新 图 书 以 支持 15.5.4。 









































新 所 有 终端 命令 ， 使 它们 与 Windows PowerShell 兼容 。 


更 新 日 志 
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e@ 使 用 prop-types 包 中 的 PropTypes。 

e@ 将 特定 于 ES6 的 材料 移 至 附录 。 

e@ 语言 和 bug 修复。 

修订 30 - 2017-04-20 

@ 添加 “如 何 充 分 利用 这 本 书 ”。 

e@ 使 用 Create React App 更 新 Redux 应 用 程序 。 
e@ 更 正 输入 错误 。 

修订 29 - 2017-04-13 






































e@ 第 6 章 修 复 了 对 this.state 的 修改 和 其 他 错别字 的 问题 。 





@ 将 第 5 章 更 新 到 ES6 类 。 
@ 将 “JSX” 更 新 到 ES6 类 。 
修订 28 - 2017-04-10 
e@ 更 新 第 9 章 以 支持 react-router v4.0.0。 
@ 小 的 bug 修复 和 拼写 错误 更 正 。 
修订 27 - 2017-03-16 
@ 修复 第 5 章 中 的 依赖 关系 问题 。 
@ 修复 “Relay” 一 章 中 的 格式 校 验 错误 。 
修订 26 - 2017-02-22 
e@ 增加 了 Christopher Chedeau (@vjeux ) 的 序 。 
e 更 正 输入 错误 。 
e@ 更 新 关于 第 2 章 中 的 属性 初始 化 器 的 讨论 。 
修订 25 - 2017-02-17 
e@ 增加 “Relay” 一 章 。 
修订 24 - 2017-02-08 
@ 更 新 Redux 相关 章节 以 使 用 ES6 类 组 件 。 
修订 23 - 2017-02-06 
e@ 更 新 “Webpack” 和 “单元 测试 ”。 
-使 用 ES6 类 组 件 。 
- .babelrc 讨论 。 
@ 修复 第 9 章 的 错误 。 
修订 22 - 2017-02-01 
e@ 更 新 第 1 章 。 
-使 用 属性 初始 化 器 。 



























































648 更 新 日 志 





-更 深入 的 讨论 Babel 和 Babel 插件 。 
e@ 更 新 第 2、3 章 。 
- 使 用 ES6 类 组 件 。 
e@ 更 新 Redux 一 章 。 
- 图 像 大 小 。 
修订 21 - 2017-01-27 
e@ 更 新 第 1 章 。 
- 使 用 ES6 类 组 件 。 
- 改进 了 关于 不 变性 的 讨论 。 
修订 20 - 2017-01-10 
@ 增加 了 “React Native” 一 章 。 
修订 19 - 2016-12-20 
e@ 增加 了 第 9 章 。 
修订 18 - 2016-11-22 
@ 改进 了 Windows 支持 。 
e@ 更 新 代码 到 react-15.4.1。 
e@ bug 修复 。 


修订 17 - 2016-11-04 
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e@ 更 新 代码 ， 使 其 可 以 在 没有 Cygwin ( PowerShell ) 的 Windows 中 使 月 








e@ 在 书 中 添加 了 Windows 安装 说 明 。 
e@ 替换 Babel 版 本 。 

修订 16 - 2016-10-12 

e 增加 了 第 8 章 。 

修订 15 - 2016-10-05 

e 增加 了 第 7 章 。 

修订 14 - 2016-08-26 

e@ 增加 了 第 6 章 。 

修订 13 - 2016-08-02 

e@ 更 新 代码 到 react-15.3.0。 
修订 12 - 2016-07-26 


e@ 更 新 代码 到 react-15.2.1。 
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修订 11 - 2016-07-08 

@ 更 新 代码 到 react-15.2.0。 

修订 10 - 2016-06-24 

e@ 更 新 代码 到 react-15.1.0。 

修订 9 - 2016-06-21 

@ 增加 了 “编写 GraphQL 服务 器 ”一 章 。 
修订 8 - 2016-06-02 

e 增加 了 第 11 章 。 

e@ 增加 “使 用 Redux 表示 和 容器 组 件 ” 一 章 。 
修订 7 - 2016-05-13 

e 增加 了 第 13 章 。 

@ 更 新 代码 到 react-15.0.2。 

修订 6 - 2016-05-13 

e 增加 了 “配置 组 件 ” 一 章 。 

e@ 增加 了 附录 A。 

修订 5 - 2016-04-25 

e@ 增加 了 第 10 章 。 

修订 4 - 2016-04-22 

e 增加 了 第 4 章 。 

修订 3 - 2016-04-08 

e@ 更 新 代码 到 react-15.0.1。 

修订 2 - 2016-03-16 
对 第 1 章 进 行 了 重要 的 重 写 ， 以 使 其 思路 更 清晰 /更 好 。 
各 种 修正 。 

改进 代码 风格 。 

更 新 图 表 。 
修订 1 - 2016-02-14 

本 书 的 最 初版 本 包含 : 

© 章 ， 第 一 个 React Web 应 用 程序 ; 
组 件 ; 

组 件 与 服务 器 。 
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回复 “前 端 ” 查 看 相关 书 单 


微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 |T 好 书 
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QQ 连接 


灵 读 者 官方 群 I: 218139230 
灵 读 者 官方 群 I[: 164939616 
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在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , 图 灵 访 谈 














“React 和 其 他 库 的 不 同 之 处 在 于 ， 它 可 以 教会 你 一 些 概念 ， 这 些 概 念 可 以 在 你 的 职业 生涯 中 


反复 使 用 。 
一 一 Christopher Chedeau 
Facebook 前 端 工程 师 ，React Native 共 同 创作 者 


“本 书 完整 地 描绘 了 React 的 图 景 ， 可 以 让 我 循序 渐进 地 学 习 。 





William Young 
Foursquare 高 级 软件 工程 师 


“本 书 逻 辑 清 晰 ， 内 容 详实 。 购 买 本 书 是 一 个 非常 明智 的 决定 。” 


一 一 Otman Bouchari 
RestauMagnet LLC 创 始 人 


Web 开 发 人 员 需 要 考虑 使 用 不 同 的 代码 解决 浏览 器 兼容 性 问题 。React 改 变 了 这 种 局 面 ， 它 不 仅 可 
以 帮 你 为 用 户 创建 良好 的 应 用 程序 ， 而 且 还 可 以 让 你 成 为 一 名 更 出 色 的 开发 人 员 。 本 书 介 绍 了 React 的 
整个 生态 系统 ， 包 括 React 核 心 库 和 许多 工具 。 读 完 本 书后 ， 你 和 你 的 团队 将 拥有 构建 可 靠 且 功 能 强大 
的 React 应 用 程序 所 需 的 一 切 知 识 。 


本 书 不 只 是 一 本 书 ， 而 且 还 可 以 当 作 一 门 课程 来 学 习 ， 每 一 章 都 配 有 示例 代码 。 本 书 能 帮助 你 “一 站 
式 ” 获 取 React 的 系统 知识 和 正确 工具 ， 免 去 四 处 搜罗 碎片 化 知识 的 烦恼 ， 为 前 端 开 发 打下 坚实 的 基础 。 


创建 自己 的 应 用 程序 一 一 编写 组 件 ， 处 理 用 户 交互 ， 管 理 富 表单 ， 与 服务 器 交互 

探索 Create React App 的 工作 原理 ， 编 写 自 动 化 单元 测试 ， 使 用 客户 端 路 由 构建 多 页 面 
应 用 程序 

探讨 数据 的 架构 、 传 输 和 管理 策略 一 一 Redux、GraphQL 和 Relay 

使 用 React Native 编 写 原生 、 跨 平台 的 移动 应 用 程序 
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